webpack中module、chunk和bundle是基本概念，搞懂它们是交流和学习的基础。
module
模块可以理解为一个单独的文件，一个文件可以看做一个模块。
chunk
chunk是webpack用来命名编译的中间产物，如一个入口依赖多个模块，编译时就会将多个模块和入口编译到一个文件，这时候这个文件就叫chunk。当然这是最简单情况，一个入口对应一个chunk，然后一个chunk生成一个bundle。如果使用了code spliting，那么一个入口就可能生成多个chunk，对应的bundle也可能会增加。
bundle
bundle就是webpack编译生成的最终代码，一般来说和chunk一一对应。
实例说明
看名词的定义往往很抽象，下面举个例子就很清楚了。
示例项目的结构：
const common = require('./lib/common');
const utils = require('./lib/utils');
common.hello();
utils.getURL();
entry2.js依赖 lib/utils.js，而且采用的是异步加载的方式（做code spliting）:
import('./lib/utils').then(utils => console.log(utils));
utils.js依赖common.js：
const common = require('./common');
exports.getURL = url => {
url += common.debug;
return url;
}
webpack.config.js配置：
module.exports = {
mode: 'production',
entry: {
chunk1: './src/entry1.js', // 一个入口文件
chunk2: './src/entry2.js', // 两一个入口文件
},
output: {
filename: '[name].bundle.js', // 出口文件
},
};
编译后的结果：
示例分析
其中entry1.js、entry2.js、common.js、utils.js就是一个个module。根据webpack配置和module依赖关系分析可以得出，webpack要编译三个文件：utils.js（code spliting结果）(编号2）、entry1.js（编号0）和entry2.js（编号1），这三个文件就是chunk。然后根据依赖关系，entry1.js依赖utils.js，因此编译最终结果有三个bundle，其中2.bundle.js由chunk2生成，chunk1.bundle.js有chunk0和chunk2生成，chunk2.bundle.js有chunk1生成。
