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 逻辑，可以直接替换