引言

webpack作为一个前端资源的编译和打包工具，它的工作流程主要分为四步：入口解析（entry）、模块解析（import）、模块转译（module）、资源合并打包（output）。基于此，webpack配置项可以分为两类：流程类和工具类。其中流程类配置主要是作用于上述四个环节中一个或者多个；而工具类则致力于提供更多工程化能力（比如说提升开发效率的、性能优化类、日志类的）。

HMR

HMR（Hot Module Replacement）热模块替换的作用是在保持页面状态的情况下动态替换资源模块。它可以在不刷新整个页面的情况下，替换、添加或删除模块，从而大大提高我们的开发效率。大致工作流程是：HMR运行时会检查更新，并异步下载更新，通知应用。然后应用会实施（apply）这些更新。 关于HMR的使用（enable），首先需要在devServer中配置'hot：true'

然后还需要调用 module.hot.accept 接口，声明如何将模块安全地替换为最新代码

实现原理： 1、在初始构建过程中，编译器会为每个模块生成标识符，并创建一个依赖图，该图表示模块之间的依赖关系。使用webpack-dev-server(简称WDS)托管静态资源，同时以Runtime方式注入HMR客户端代码； 2、浏览器加载页面后，与WDS建立WebSocket连接； 3、Webpack监听到文件变化后，增量构建发生变更的模块，并通过WebSocket发送hash事件； 4、浏览器接收到hash事件后，请求manifest资源文件，确认增量变更范围； 5、浏览器加载发生变更的增量模块； 6、Webpack运行时触发变更模块的module.hot.accept回调，执行代码变更逻辑

Tree shaking

Tree chaking是一种用于优化JS代码的技术，它通过静态分析代码的依赖关系（import,export），识别和移除未被使用的模块或代码块，以减少最终打包文件的大小。

实现原理： 1、静态分析：编译器在构建过程中对 JavaScript 代码进行静态分析，建立模块之间的依赖图，了解每个模块导出和导入的变量、函数或类； 2、标记未引用代码：对于每个模块中的导出成员，编译器标记为未引用的代码块； 3、移除未引用代码：编译器通过标记的信息，从最终生成的代码中去除未引用的代码块。这样，未使用的模块和导出的函数、类等就不会包含在最终的打包文件中

使用例子：

运行npm run build，在产物中发现square被标注成unused

参考文档

1、Webpack 原理系列十：HMR 原理全解析 (qq.com) 2、webpack 3、Hot Module Replacement | webpack 4、Tree Shaking | webpack