这是我参与第四届青训营笔记创作活动的第5天。今天说一说webpack。
Webpack知识体系
什么是Webpack
前端项目是由各种资源构成的。Webpack本质上是一种前端资源编译、打包工具。 将多份资源文件打包成一个Bundle。
Plugin
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运⾏的⽣命周期中会⼴播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Plugin在 plugins 中单独配置。 类型为数组，每⼀项是⼀个 plugin 的实例，参数都通过构造函数传⼊。 plugins 在整个编译周期都起作用.
常见的Plugin
- define-plugin：定义环境变量
- html-webpack-plugin：简化html⽂件创建
- uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
- webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度
- webpack-bundle-analyzer: 可视化webpack输出⽂件的体积
- mini-css-extract-plugin: CSS提取到单独的⽂件中，⽀持按需加载
TreeShaking
作用：它表示在打包的时候会去除一些无用的代码 在 Webpack 中，启动 Tree Shaking 功能必须同时满足三个条件：
- 使用 ESM 规范编写模块代码
- 配置 optimization.usedExports 为 true，启动标记功能
- 启动代码优化功能，可以通过如下方式实现： 4. 配置 mode = production 5. 配置 optimization.minimize = true 6. 提供optimization.minimizer数组
Webpack的构建流程
Webpack 的运⾏流程是⼀个串⾏的过程，从启动到结束会依次执⾏以下流程：
- 初始化参数：从配置⽂件和 Shell 语句中读取与合并参数，得出最终的参数；
- 开始编译：⽤上⼀步得到的参数初始化 Compiler 对象，加载所有配置的插件，执⾏对象的 run ⽅法开始执⾏编译；
- 确定入口：根据配置中的 entry 找出所有的⼊⼝⽂件；
- 编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏编译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；
- 完成模块编译：在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统。
