【Webpack系列】chunk在webpack中，有一个经常会听到的词，那便是 chunk，英文翻译就是一束，一捆

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

chunk是什么

在webpack中，有一个经常会听到的词，那便是 chunk，英文翻译就是一束，一捆的意思，在webpack里其实就是指 模块的集合，在打包过程中，模块会被合并成chunk，chunk合并成chunk 组，并形成一个通过模块互相连接的图(ModuleGraph)

上面又提到了一个词：chunk组，那这又是什么呢？

chunk的分类

要搞清楚这个概念，就得先理清在webpack里的chunk类型，通常分为两类

initial: 是入口起点的chunk,此chunk包含入口起点指定的所有模块及其依赖项,简单点理解就是所有 同步加载 的模块
non-initial: 延迟加载的chunk，可能会出现在使用 动态导入(dynamic imports) 或者 SplitChunksPlugin 时，简单点理解就是所有 异步加载 的模块

举个例子说明这两种类型

    /* webpack.config.js */
    module.exports = {
        entry: './src/index.jsx',
    } 

    /* ./src/index.jsx */
    import React from 'react';
    import ReactDOM from 'react-dom';

    import('./app.jsx').then((App) => {
        ReactDOM.render(<App />, root);
    })

上面的代码会输出如下两个chunk

main.js：该chunk是一个 initial chunk，包含有除了 app.jsx 外的所有依赖
394.js : 该chunk是一个 non-initial，包含了 app.jsx 的内容

对于 non-initial 的chunk我们可以通过 magic comment(魔术注释) 的方式为其命名，示例如下

    /* ./src/index.jsx */
    import(
    /* webpackChunkName: "app" */
    './app.jsx'
    ).then((App) => {
        ReactDOM.render(<App />, root)
    });

通过这种配置，就可以为non-initial的chunk命名为 app.js，这种看似黑魔法的方式，其实背后是利用 AST 来进行代码分析，从而去获取设置的名称

现在回到最开始的问题：chunk组是什么? 其实答案我相信你已经知道了，因为chunk有non-initial的类型，因此一个chunk可能会被拆分为多个，从而需要chunk组来容纳管理这些chunk

如何修改chunk的名称

其实对于chunk名称的调整除了通过魔术注释的方式，还可以通过配置 output 来实现，具体如下

output.filename: 用于 initial chunk 文件
output.chunkFilename: 用于 non-initial chunk 文件

还可以通过 占位符 的方式来辅助命名chunk，常用的如下

[id]: chunk id，整数形式
[name]: chunk name，如果chunk没有名称，则会使用其id作为名称
[contenthash]: 输出chunk内容的 md4-hash 值

结语

最近一段时间在对webpack的梳理中，发现了太多细碎的知识点了，这也是我最开始一直不想深入研究它的原因 = =。但既然选择了这条路，那么【Webpack系列】就会一直更新下去，帮助自己，也帮助需要帮助的人~