webpack中的chunk 和 bundle 有什么区别 ？

Question

webpack中的chunk 和 bundle 有什么区别 ？

Answer 1

module：对于webpack来说，所有的资源(.js、.css、.png)都是module
entry-point：生成依赖图的入口；只能是.js文件(parcel能使用其他模块(.html)做为入口，生成依赖图)
chunk：是webpack内部运行时的概念；一个chunk是对依赖图的部分进行封装的结果（`Chunkthe class is the encapsulation for parts of your dependency graph`）；可以通过多个entry-point来生成一个chunk
chunk可以分为三类;

• entry chunk

  • 包含webpack runtime code并且是最先执行的chunk

• initial chunk

  • 包含同步加载进来的module且不包含runtime code的chunk
  • 在entry chunk执行后再执行的

• normal chunk

  • 使用require.ensure、System.import、import()异步加载进来的module，会被放到normal chunk中

bundle：最终输出的chunk在用户端，被称之为bundle；一般一个chunk对应一个bundle，只有在配置了sourcemap时，才会出现一个chunk对应多个bundle的情况；

• 例子

entry:{
    main:['./src/main.js','./src/test.js'],
    other:['./src.other.js']
},
output:{
    filename:"[name].bundle.js"
}

main.js中引入了gloabl.css；

• module

  • main.js、test.js、other.js、global.css都是module

• entry-point

  • main.js、test.js、other.js

• chunk

  • main
  • other

• bundle

  • main.bundle.js
  • other.bundle.js

entry的两个key对应两个chunk，最终会输出两个bundle；main.js、test.js、other.js都是entry-point

以上是自己的理解，可能有误，欢迎指正；

参考
https://github.com/webpack/webpack.js.org/issues/970
https://juejin.im/post/5cede821f265da1bbd4b5630
https://juejin.im/post/5d2b300de51d45775b419c76

Answer 2

刚好遇到这个问题进上面的连接里面逛了一圈,我是这么理解的.

1. 模块就是模块可以是ESM模块也可以是commonJS或者AMD模块
2. 打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk
3. bundle是最后打包后的文件,最终文件可以和chunk长的一模一样,但是大部分情况下他是多个chunk的集合

所以上面的三个文件都是模块,假使他们都是使用commonJS或者ESM编写的模块.

上面的例子中只提供了入口文件的配置,操作了三个模块,输出了两个文件.

foo操作的是一个两个模块的集合被视为一个chunks但是如果在这个两个文件中没有在引入其他文件的话,那么他就是最终的Bundle.

而bar同理操作的是一个chunk如果没有继续引入其他文件的话输出的bundle就等于chunk,所以区别不太明显.

为了优化最后生产出的bundle数量可能不等于chunk的数量因为有可能多个chunk被组合到了一个Bundle中,当然还有其他情况.

Answer 3

https://stackoverflow.com/que...

Answer 4

webpack 中涉及的术语中文解释:glossary
webpack 中涉及的术语解释:glossary

stackoverflow 上示例

Answer 5

a chunk is a group of modules within the webpack process, a bundle is an emitted chunk or set of chunks.

一个块是webpack进程中的一组模块，一个bundle是一个发出的块或一组块。