Webpack HMR（热更新）的原理是什么？

HMR（Hot Module Replacement）：在应用运行时替换、添加或删除模块，而无需完全刷新页面。

工作流程：

1. 文件变更 → 2. Webpack 增量编译 → 3. 通知浏览器 → 4. 请求更新 → 5. 应用补丁

详细步骤：

1. 文件变化：

• Webpack-dev-server 的 watch 模式检测到文件变更

2. 增量编译：

• Webpack 重新编译变更模块
• 生成两个 JSON 补丁：
  • update chunk（新的模块代码）
  • update manifest（描述哪些模块变化）

3. WebSocket 通信：

• Webpack-dev-server 通过 WebSocket 向浏览器发送 hash 和 ok 信号
• 浏览器端的 webpack-dev-server client 收到信号后

4. 请求更新：

• 浏览器通过 JSONP 请求两个补丁文件（[hash].hot-update.json 和 [hash].hot-update.js）

5. 应用补丁：

• HotModuleReplacementPlugin runtime 执行模块替换
• 检查模块是否 accept 自己的变更：
  • 如果有 module.hot.accept()，执行回调完成局部刷新
  • 如果无 accept 且冒泡到入口也无人 accept，执行全量刷新

代码中的 Accept：

if (module.hot) {
  module.hot.accept('./component.js', function() {
    // 替换后的回调
    rerender();
  });
}

注意：

• HMR 不会保留状态，但 React Fast Refresh / Vue HMR 会通过自定义 accept 逻辑保留组件状态。