⚡ 30 秒速记

• 核心判断：HMR 通过文件监听、增量编译、更新通知和运行时模块替换保留页面状态
• 原理主线：围绕 「核心机制」、「执行链路」、「边界与实践」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了Webpack的HMR（热模块替换）机制，包括HMR的工作原理、配置方法、与webpack-dev-server的协作流程，以及在React等框架中的热更新实践，帮助前端开发者理解如何实现无需刷新页面的高效开发体验。
• 边界与代价：依赖边界拒绝更新或副作用无法安全重放时必须回退刷新；开发期热替换不属于生产运行逻辑
• 工程落地：排障应沿文件是否被监听、哈希是否变化、客户端是否收到更新、accept 边界是否成立逐段检查

HMR 通过监听文件变化、增量编译并把更新模块交给浏览器运行时替换，从而尽量避免整页刷新和状态丢失。 devServer 编译完成后会把新 hash 通知客户端，客户端再获取更新描述和模块补丁。运行时沿依赖关系判断模块是否被接受，随后清理旧缓存、写入新模块并重新执行。若更新未被接收或应用失败，通常会退化为刷新页面；旧版 JSONP 链路也不能直接套用到所有新版本。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

基本实现原理大致这样的，构建 bundle 的时候，加入一段 HMR runtime 的 js 和一段和服务沟通的 js 。文件修改会触发 webpack 重新构建，服务器通过向浏览器发送更新消息，浏览器通过 jsonp 拉取更新的模块文件，jsonp 回调触发模块热替换逻辑

热更新配置

使用webpack-dev-server,设置 hot 属性为 true.写模块时，按照以下写法: