webpack知识点
# webpack 知识点
# webpack Module
Webpack 可以看做是模块打包机，我们编写的任何文件，对于 Webpack 来说，都是一个个模块。
所以 Webpack 的配置文件，有一个 module 字段，module 下有一个 rules 字段，rules 下有就是处理模块的规则，配置哪类的模块，交由哪类 loader 来处理。
# webpack Chunk
Chunk 是 Webpack 打包过程中，一堆 module 的集合。
我们知道 Webpack 的打包是从一个入口文件开始，也可以说是入口模块，入口模块引用这其他模块，模块再引用模块。Webpack 通过引用关系逐个打包模块，这些 module 就形成了一个 Chunk。
产生 Chunk 的三种途径：
entry 入口
异步加载模块
代码分割（code spliting）
# webpack Bundle
Bundle 就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个 Chunk 会生产一个 Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool 配置成'source-map'，然后只有一个入口文件，也不配置代码分割：这样的配置，会产生一个 Chunk，但是会产生两个 bundle（多一个 map）
Chunk 和 Bundle 的区别：Chunk 是过程中的代码块，Bundle 是结果的代码块。
# webpack4 分包
入口起点：使用
entry(opens new window) 配置手动地分离代码。防止重复：使用
SplitChunksPlugin(opens new window) 去重和分离 chunk。
从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 SplitChunksPlugin
配置： optimization.splitChunks
- 动态导入：通过模块中的内联函数调用来分离代码。
使用 webpack 拆包功能，从 bundle.js 中拆分出多个 chunk.js，实现 js 的按需加载，可以提高首屏加载速度
webpack4 取消了 CommonsChunkPlugin，使用 splitChunks 进行拆包