HMR通过WebSocket实现模块热更新，Webpack DevServer提供实时通信与内存编译，浏览器端runtime接收变更后局部替换模块，依赖accept回调控制更新边界，否则整页刷新。
模块热更新（Hot Module Replacement，简称 HMR）是 Webpack 提供的一项强大功能，它允许在应用运行时替换、添加或删除模块，而无需刷新整个页面。这在开发过程中极大提升了效率，尤其对保留应用状态（比如表单输入、路由状态）非常有帮助。Webpack DevServer 是实现这一功能的核心工具之一。
HMR 是如何工作的
HMR 的本质是一套基于 WebSocket 的通信机制，它让 Webpack 构建系统与浏览器之间保持实时连接。当源代码发生变化，Webpack 重新构建后，只将变更的模块推送到浏览器，由 HMR runtime 决定如何更新。
基本流程如下：
- 启动 Webpack DevServer 时，开启一个本地服务并建立 WebSocket 连接
- 文件变化触发 Webpack 增量编译，生成新的 manifest 和差异模块（hot update chunk）
- DevServer 通过 WebSocket 将更新信息推送给客户端
- 浏览器接收到消息后，HMR runtime 请求新的模块代码
- 新模块加载成功后，尝试进行热替换：如果模块支持 HMR，则执行 accept 回调；否则回退到整页刷新
Webpack DevServer 的角色
Webpack DevServer 是一个基于 Express 和 Webpack 的开发服务器，集成了自动编译和热更新能力。它内部使用 webpack-dev-middleware 来拦截 Webpack 构建输出，将资源保存在内存中，提升访问速度。
关键作用包括：
- 提供静态文件服务和入口 HTML 页面
- 启动一个 WebSocket 服务，用于推送构建状态和模块更新
- 注入 HMR 客户端运行时代码（如 sockjs-node 或 ws）到打包结果中
- 监听文件变化，触发重新编译
客户端 HMR 运行时的工作方式
在浏览器中，HMR 不是自动生效的。你需要显式地告诉 Webpack 哪些模块可以热更新。常见写法是使用 module.hot.accept：
if (module.hot) {
module.hot.accept('./MyComponent', () => {
// 当 MyComponent 更新时执行
render(App);
});
}
对于 React 开发，通常会借助 react-hot-loader 或现代的 React Fast Refresh，它们封装了 HMR 接口，做到组件级别的无感热更新。
HMR runtime 会维护模块依赖图，当某个模块更新时，沿着依赖链向上通知，直到找到注册了 accept 的边界模块。如果一直没找到，就会触发页面刷新。
总结
Webpack 的模块热更新依赖于 DevServer 提供的实时通信能力和内存编译机制。通过 WebSocket 推送变更，配合客户端 HMR runtime 实现精准模块替换。虽然配置上可能看似“开箱即用”，但理解其背后原理有助于排查热更新失效、意外刷新等问题。
基本上就这些——不复杂，但容易忽略细节。掌握 HMR 工作流，能让你在开发调试时更从容。
