webpack中chunk、module、bundle的关系

先确定一点，我们知道js万物皆对象，那么：webpack中万物皆模块。因为它按照模块来分析。

什么是module

只要可以引用的，它们都是module。例如import、require或者css的@import。
例如：

// index.js文件
import _ from 'lodash';

console.log(_.join(['大郎', '该', '吃药了'], ' '));

这是引入一个lodash模块，同时对于打包分析的来说呈现的结果是：

它是一个module

什么是chunk

bundle 由 chunk 组成。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。

通过import或require引入的module，就是chunk。所以有时候chunk是一个最终输出的js文件，有时只是组成bundle中的一部分

什么是bundle

最终的输出文件就是bundle（由chunk组成）。
看示例代码：

// index.js文件
import _ from 'lodash';

console.log(_.join(['大郎', '该', '吃药了'], ' '));

// another.js文件
import _ from 'lodash';

console.log(_.join(['乖', '快', '吃吧'], ' '));

然后运行查看看分析图：

如上就是两个大的bundle

对应的从web加载上看：

这就是两个js文件，是两大bundle（对于最终加载来说其实也是js文件）

其中，代码分离，即splitchunks是离chunks。

关系图

他们的区别关系有两种：

或者是：

总结：手写的或是引用的都是module，webpack处理时按chunk来分，最终输出的是叫bundle。会发现，只是它们只是在不同时期的场景不同叫法而已。