CLI输出中‘Chunks’含义及Webpack分块相关问题咨询

我来帮你拆解这些Webpack分块的疑问，结合你的配置和实际情况一步步说清楚：

1. CLI输出里的「Chunks」到底是什么？ #

简单说，Chunks是Webpack在打包过程中用来组织代码的逻辑单元，不是最终的输出文件。Webpack会把你的代码模块（比如各个业务文件、依赖库）按照规则打包成一个个Chunks，这些Chunks可能会被进一步合并、拆分，最终变成你看到的输出文件。一个Chunk可能对应一个输出文件，也可能多个Chunks合并成一个，或者某个Chunk被嵌入到其他文件里。

2. 为什么Chunks数量会时变时不变？ #

这和你的CommonsChunkPlugin配置直接相关，尤其是那个minChunks参数：

• 当你把minChunks设为1时，Webpack会把每个入口模块以及vendors都当作需要提取的公共块，这会触发更多的拆分逻辑，生成更多Chunks；
• 如果你把minChunks调高（比如设为2），只有被至少2个入口引用的模块才会被提取到公共Chunk里，这时候拆分的逻辑减少，Chunks数量自然就少了。
  除此之外，入口文件的数量、代码里的动态导入（import()）、其他代码分割插件的配置，都会影响Chunks的数量。

3. 为什么分块数量和输出文件对不上？找不到分块对应的文件？ #

问题出在你的CommonsChunkPlugin配置上！你把入口文件名index、home放到了names数组里，这是错误的用法：

CommonsChunkPlugin的names参数是用来定义要生成的公共Chunk的名字，而不是把已有的入口当作公共块来处理。

当你把入口名放进names数组，Webpack会把这些入口的代码合并到公共Chunk里，反而会“吃掉”原本的入口文件，或者触发优化规则，把一些Chunks合并到其他文件中，导致你看不到对应的单独文件。

另外，你的chunkFilename配置是给异步加载的Chunk用的（比如动态import生成的代码块），而入口相关的Chunk会用filename的规则输出。再加上你用了-p参数（生产模式），Webpack会自动开启压缩、合并小Chunks等优化，一些小的Chunks会被合并到主文件里，自然看不到对应的单独文件。

给你调整一下配置的建议 #

把CommonsChunkPlugin的配置改成这样，就能看到清晰的分块和对应的输出文件了：

plugins: [
  // 提取node_modules里的第三方依赖到vendors chunk
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",
    // 只提取来自node_modules的模块
    minChunks: module => module.context && module.context.includes('node_modules')
  }),
  // 提取index和home之间的公共业务代码到common chunk
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    minChunks: 2, // 被至少2个入口引用才提取
    chunks: ['index', 'home'] // 只在这两个入口里找公共代码
  }),
],

这样配置后，你会在_distro_目录下看到vendors.xxxx.js、common.xxxx.js、index.xxxx.js、home.xxxx.js四个文件，每个Chunk对应一个输出文件，就不会出现“找不到分块文件”的问题了。

内容的提问来源于stack exchange，提问作者Green