先確定一點(diǎn)，我們知道js萬(wàn)物皆對(duì)象，那么：webpack中萬(wàn)物皆模塊。因?yàn)樗凑漳K來(lái)分析。
什么是module
只要可以引用的，它們都是module。例如import、require或者css的@import。
例如：
// index.js文件
import _ from 'lodash';
console.log(_.join(['大郎', '該', '吃藥了'], ' '));
這是引入一個(gè)lodash模塊，同時(shí)對(duì)于打包分析的來(lái)說(shuō)呈現(xiàn)的結(jié)果是：
它是一個(gè)module
什么是chunk
bundle 由 chunk 組成。通常 chunk 會(huì)直接對(duì)應(yīng)所輸出的 bundle，但是有一些配置并不會(huì)產(chǎn)生一對(duì)一的關(guān)系。
通過(guò)import或require引入的module，就是chunk。所以有時(shí)候chunk是一個(gè)最終輸出的js文件，有時(shí)只是組成bundle中的一部分
什么是bundle
最終的輸出文件就是bundle（由chunk組成）。
看示例代碼：
// index.js文件
import _ from 'lodash';
console.log(_.join(['大郎', '該', '吃藥了'], ' '));
// another.js文件
import _ from 'lodash';
console.log(_.join(['乖', '快', '吃吧'], ' '));
然后運(yùn)行查看看分析圖：
如上就是兩個(gè)大的bundle
對(duì)應(yīng)的從web加載上看：
這就是兩個(gè)js文件，是兩大bundle（對(duì)于最終加載來(lái)說(shuō)其實(shí)也是js文件）
其中，代碼分離，即splitchunks是離chunks。
關(guān)系圖
他們的區(qū)別關(guān)系有兩種：
或者是：
