webpack的chunks和bundle是什么意思？

Question

1.图中的chunks是什么意思？
2.为什么有些chunks有chunk names有的没有？
3.那些数字代表什么？
4.emitted是什么意思
5.chunk和bundle之间是什么关系？
6.为什么我的build记录没有下图官方指南中红框部分？那个红框部分是什么？我是用vue-cli构建的项目

Answer 1

1.chunks就是代码块的意思，有name的chunk是在entry里配置了name的，那些1，2，3，4啥的应该是用了code splitting配置生成的，数字是chunk的id
2.多个chunk合在一起就是bundle，一个bundle可以理解为一个大的js打包之后生成的文件，而多个bundle里可能有公共的部分，或者一个bundle里的东西并不需要一次性加载，需要按照路由按需加载，这个时候就需要按需加载，拆分成不同的chunk
3.你的和官方的不一致，可能是因为你没有用到code splitting

个人理解，如有错误，还望指出

Answer 2

chunk 半成品，需要继续加工
bundle 成品

Answer 3

其他的不太清楚，6的话在vue-cli的build.js中

process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: true,// 这个改为true就有了
  chunkModules: false
}) + '\n\n')

应该是打包过程中要构建的文件的信息。

Answer 4

可以尝试 webpack --profile --json > stats.json
然后将生成的json文件上传到
http://webpack.github.io/anal...
会有一个直观的认识