Webpack 配置 HMR 的核心是让模块主动声明可热替换并配合运行时逻辑，而非仅开启开关；CSS 依赖 style-loader 天然支持，JS 需用 module.hot API 显式处理，React 项目推荐使用 @pmmmwh/react-refresh-webpack-plugin。
Webpack 中配置 HMR 不是为了“加功能”，而是让开发过程更接近所见即所得——改一行代码，页面局部更新，状态不丢，不用手动刷新。关键不在开启开关，而在让模块知道自己可以被热替换，并配合运行时逻辑。
基础配置：启用 HMR 运行环境
这是前提，但不是全部。Webpack 5+ 默认内置 HMR 支持，只需在开发服务器中启用：
- 在 webpack.config.js 的
devServer中设置hot: true - 无需再手动添加
HotModuleReplacementPlugin（Webpack 5 已自动注入） - 命令行也可用
webpack serve --hot快速启动
CSS 文件天然支持 HMR
只要用了 style-loader，CSS 修改后会自动生效，无需额外编码。这是因为 style-loader 内部已实现 module.hot.accept 逻辑，直接替换 <style> 标签内容。
例如：
立即学习“Java免费学习笔记（深入）”；
- 修改
button.css中的背景色，保存后浏览器立即更新样式 - 组件内联样式、CSS Modules、Sass 都同样适用
JavaScript 模块需主动声明可热替换
JS 不像 CSS 那样开箱即用，必须显式告诉 Webpack：“这个模块允许被替换，并且我知道怎么清理和恢复”。核心是使用 module.hot API：
- 用
module.hot.accept('./dep.js', callback)监听依赖模块变更 - 用
module.hot.dispose(callback)在模块被替换前执行清理（如清除定时器、解绑事件） - 确保入口文件或根组件模块也调用
accept，否则热更新链会中断
常见写法示例：
if (module.hot) {
module.hot.accept('./utils', () => {
console.log('utils 更新了');
// 重新初始化相关逻辑，比如重绘组件
});
module.hot.dispose(() => {
// 清理副作用
});
}
React 项目建议搭配官方插件
手动写 module.hot 容易出错且重复。推荐使用 @pmmmwh/react-refresh-webpack-plugin：
- 它会自动注入 HMR 逻辑，支持函数组件、Hooks 状态保留
- 配置只需在
webpack.config.jsplugins 中加入插件，并在devServer启用hot - 避免因组件重渲染导致的状态丢失问题
