1.webpack 的热更新原理
md
### 模块热替换（Hot Module Replacement）：
`Webpack` 的热更新基于模块热替换技术。它允许在应用程序运行过程中替换、添加或删除模块，而无需完全刷新页面。
这种替换是在运行时进行的，可以使应用程序保持在当前状态下重新加载所需的部分。
### HMR Runtime（热更新运行时）：
Webpack 会在构建过程中生成一个称为 HMR Runtime 的代码块。这段代码在运行时与应用程序一起加载，
并通过 `WebSocket` 与开发服务器保持连接。`HMR Runtime` 负责管理模块热替换的逻辑。
### 监视文件变化：
在开发模式下，Webpack 会监视项目中各个文件的变化。当开发者保存文件时，Webpack 检测到文件发生变化，并`触发重新编译`过程。
### 构建更新的模块：
在重新编译过程中，Webpack 会确定哪些模块发生了变化，并构建更新的模块。这些更新的模块并不会替换现有的模块，而是生成一个更新的版本。
### HMR 接口：
HMR Runtime 与开发服务器建立了 WebSocket 连接，并通过 HMR 接口通信。当构建完成并生成了更新的模块时，
Webpack 会将更新的模块信息通过 HMR 接口发送给 HMR Runtime。
### 热更新处理：
HMR Runtime 接收到更新的模块信息后，会根据更新的模块执行相应的操作。这可能涉及替换现有的模块、添加新模块或删除不再需要的模块。
这样，应用程序的状态就得到了实时更新，而不需要完全刷新页面。
总的来说，Webpack 的热更新利用了模块热替换技术和 HMR Runtime，通过监视文件变化、构建更新的模块，
并通过 WebSocket 与开发服务器进行通信，实现了代码的实时更新和页面局部刷新，提高了开发效率和体验。