关于 Webpack 的 chunk

Question

chunk 可以简单理解为 code spliting 出来的包，如果代码没有 code spliting 那么基本上可以认为对应于所输出的 bundle，webpack 1.0的文档中将 chunk 分为的三种类型，如下：

目前官方文档中已经找不到这些描述了，/(ㄒoㄒ)/~~，不过可以在这两篇博文中看到比较详细的解释

• 「前端」看懂前端脚手架你需要这篇webpack
• webpack 进阶

我们在使用 webpack 的时候对于 chunk 比较关注的可能就是使用 code spliting 和写插件的时候，code spliting 这个话题留到之后说，现在主要聊一聊写 webpack 插件时和 chunk 打交道的那些事儿。

webpack 插件的基本格式就是一个含有 apply 方法的 JavaScript 的 class，我们在编写插件的时候可以通过 compilation 这个对象对 chunk 进行访问，compilation.chunks 即表示了这次编译的所有 chunks，可以看一个实例，简单的多入口配置 webpack 配置如下：

const config = {
    entry: {
        'index': path.join(__dirname, 'index.js'),
        'a': path.join(__dirname, 'a.css')
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /.js$/,
            use: 'babel-loader'
        }, {
            test: /.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        }]
    },
    plugins: [
        new cleanPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlutin({
            template: path.resolve(__dirname, 'index.html')
        }),
        new ProgressBarPlugin(),
        new tablePlugin()
    ],

    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 10000
    },
    mode: 'development'
};

在 cleanPlugin 中将这次编译的 chunks 内容打印下来，如下：

const fs = require('fs')
const stringify = require('json-stringify-safe')

class cleanPlugin {
    constructor() {
        this.entriesWithNoJS = []
    }
    apply(compiler) {
        compiler.hooks.emit.tap('cleanPlugin', (compilation) => {
            const cache = []
            fs.writeFileSync('chunk.json', stringify(compilation.chunks, null, 2), {
                flag: 'w+'
            })
        })
    }
}

module.exports = cleanPlugin

json-stringify-safe 是为了解决 JSON.stringify 方法循环依赖的问题，类似的库还有 flatted 、 circular-json-es6 等

运行一下 webpack，打开 chunk.json 文件，这个文件的内容如下：https://www.wenjiangs.com/wp-content/uploads/2022/05/chunk.json

7000+ 行数确实让人有点望而却步，不过整理一下，可以发现这个数组包含两个 chunk，显然这是符合我们预期的

将其中一个 chunk 的拆解来看，大概是一个含有 id 、 entryModule、files、各种哈希的一个对象，其中 files 可以理解为输出的这个 chunk 会输出的文件数组。

得益于 webpack 的开源以及合理的命名，我们可以在 webpack 的仓库中找到关于 chunk 的源码，https://github.com/webpack/webpack/blob/master/lib/Chunk.js

很容易发现 chunk 其实是一个 class 对象

通过 Object.getOwnProppertyNames 方法可以获取 class 的属性，如下:

compilation.chunks.forEach((chunk) => {
    fs.writeFileSync('chunk-methods.json', stringify(Object.getOwnPropertyNames(chunk.__proto__), null, 2), {
       flag: 'w+'
   })
})