要让 CSS 热更新生效，必须同时启用 HMR（devServer.hot: true）、使用 style-loader（非 MiniCssExtractPlugin.loader）处理 CSS、且开发环境禁用 MiniCssExtractPlugin。
webpack-dev-server 怎么配才能让 CSS 热更新生效
默认配置下 webpack-dev-server 只会刷新整个页面（live reload），不是真正的 CSS 热更新（HMR）。要让样式修改后不刷新页面、只替换 DOM 中的 <style></style> 标签，必须同时满足三个条件：启用 HMR、用 style-loader 处理 CSS、且不能和 MiniCssExtractPlugin 共存于开发环境。
- 在
webpack.config.js的devServer配置里加hot: true（Webpack 5+ 必须显式开启） -
module.rules中处理 CSS 的 loader 链必须以style-loader结尾（不是MiniCssExtractPlugin.loader） - 确保开发环境没引入
MiniCssExtractPlugin—— 它会强制提取 CSS 成文件，彻底关闭 HMR 能力 - 如果用了
css-loader，建议加importLoaders: 1，避免@import嵌套时 HMR 失效
为什么改了 CSS 还是整页刷新
最常见原因是 loader 配置错位或插件干扰。比如误把生产用的 MiniCssExtractPlugin.loader 也塞进了开发环境 rule，或者忘了在 JS 入口里手动调用 module.hot.accept（其实 style-loader 内部已封装，不用手写，但有人会多此一举反而破坏流程）。
- 检查浏览器控制台有没有
[HMR] Waiting for update signal from WDS...—— 没这句说明 HMR 根本没启动 - 打开 Network 面板，改一次 CSS，看是否发了
hot-update.json和hot-update.js请求；没有就卡在 webpack 配置层 - 运行
npx webpack serve --info=verbose，确认输出里有HMR enabled - 如果你用的是
vue-style-loader或@vue/cli，它底层也是基于style-loader，但会自动注入 HMR 逻辑，此时反而不能手动加hot: true（Vue CLI 4.5+ 会报 warning）
style-loader 的 injectType 参数影响热更新行为
style-loader 默认用 injectType: 'styleTag'，也就是动态插入 <style></style> 标签，这是唯一支持完整 HMR 的模式。其他选项如 'singletonStyleTag' 或 'linkTag' 在某些场景下会跳过部分更新逻辑，导致样式“看起来没变”。
- 显式写
{ loader: 'style-loader', options: { injectType: 'styleTag' } }更稳妥，避免未来升级后默认值变动 -
singletonStyleTag会合并所有 style 标签成一个，适合减少 DOM 节点，但 HMR 时可能漏掉局部规则更新 -
linkTag是生成<link rel="stylesheet">，本质是走文件请求，完全不支持 HMR —— 别在开发环境用
用 CSS Modules 时热更新失效怎么办
CSS Modules 本身不影响 HMR，但常因局部作用域 + 类名哈希机制，让人误以为“样式没更新”。真实问题是：JS 模块没监听 CSS 模块变化，或类名映射缓存没清掉。
立即学习“前端免费学习笔记（深入）”；
- 确保
css-loader开启modules: true的同时，importLoaders和sourceMap都设为true（sourceMap 对 HMR 调试很关键） - 不要在组件里把
styles对象解构赋值后缓存（比如const { btn } = styles），HMR 更新的是styles整个对象，旧引用不会自动刷新 - 如果用了
react-refresh，确认@pmmmwh/react-refresh-webpack-plugin版本 ≥ 0.5.0，老版本对 CSS Modules 的 HMR 支持不完整
postcss-loader 报错会静默中断 HMR 流程，但控制台未必显示；又比如某些 PostCSS 插件（如 postcss-preset-env）在解析失败时直接丢弃整个 CSS 模块，导致后续更新无从谈起。 
