HMR 热更新原理

在 HMR 之前，应用的加载、更新都是一种页面级别的原子操作，即使只是单个代码文件发生变更，都需要刷新整个页面，才能将最新代码映射到浏览器上，这会丢失之前在页面执行过的所有交互与状态

实现原理

HMR 执行过程不复杂，核心：

• 使用 webpack-dev-server （后面简称 WDS）托管静态资源，同时以 Runtime 方式注入一段处理 HMR 逻辑的客户端代码；
• 浏览器加载页面后，与 WDS 建立 WebSocket 连接；
• Webpack 监听到文件变化后，增量构建发生变更的模块，并通过 WebSocket 发送 hash 事件；
• 浏览器接收到 hash 事件后，请求 manifest 资源文件，确认增量变更范围；
• 浏览器加载发生变更的增量模块；
• Webpack 运行时触发变更模块的 module.hot.accept 回调，执行代码变更逻辑；

总结

Webpack 的 HMR 特性底层有两个重点： 一是监听文件变化并通过 WebSocket 发送变更消息； 二是需要客户端配合，通过 module.hot.accept 接口定制特定模块的热替换规则。