CSS模块能热更新是因为css-loader+style-loader已内置module.hot.accept逻辑并封装样式替换；JS模块需手动添加module.hot.accept()及dispose清理，否则触发整页刷新。
因为 CSS 模块默认支持 HMR，而 JS 模块不自动处理更新逻辑 —— 关键不在“引入方式”，而在模块类型和 runtime 是否内置 accept 逻辑。
为什么 import './style.css' 能热更新，但 import './util.js' 不能？
CSS 文件被 css-loader + style-loader（或 MiniCssExtractPlugin 开发模式下的替代方案）处理后，最终会生成一个可被 HMR runtime 直接接管的模块。这个模块内部已预置了 module.hot.accept() 和样式替换逻辑（比如卸载旧 <style> 标签、插入新标签）。
JS 模块则完全不同：Webpack 只注入了 HMR runtime 基础能力，但不会替你决定“怎么更新”。你必须显式写 module.hot.accept() 或 module.hot.dispose() 来定义更新行为，否则 runtime 不知道该保留状态、重实例化、还是直接抛出错误并 fallback 到整页刷新。
- 常见错误现象：
util.js修改后页面整刷，控制台可能看到[HMR] Cannot apply update. Need to do a full reload. - 根本原因：JS 模块没有声明接受更新，HMR runtime 缺乏上下文，只能放弃热替换
- 对比 CSS：哪怕没写任何
hot.accept，style-loader的模块导出本身已封装好 HMR 钩子
webpack-dev-server 启用 hot:true 后，CSS 热更新依赖哪些 loader？
不是所有 CSS 处理链都支持 HMR。必须确保最终输出的是运行时可操作的样式（而非仅提取到文件），且 loader 显式兼容 HMR API。
立即学习“前端免费学习笔记（深入）”；
- 开发环境推荐组合：
style-loader（非生产用） +css-loader+ （可选postcss-loader） -
style-loader内部调用了module.hot.accept()并重写了insertStyleElement流程，实现 DOM 级样式替换 - 禁用场景：
MiniCssExtractPlugin.loader在mode: 'development'下默认不启用 HMR；若强行使用，需额外配hmr: true且确保 webpack 版本 ≥ 5.47.0 - 性能影响：每次 CSS 更新都会触发一次 DOM 操作，大量样式频繁修改可能引起 layout thrashing
如何让自定义 JS 模块也支持热更新？
核心是告诉 HMR runtime：“这个模块可以安全地被替换，并且我知道怎么清理/重建”。不能只靠 hot:true 自动生效。
- 最简可行写法：
if (module.hot) { module.hot.accept('./util.js', () => { console.log('util.js 已更新'); // 手动触发组件重渲染、重新绑定事件、或更新导出值 }); } - 更健壮的做法：配合
dispose清理副作用if (module.hot) { module.hot.accept('./util.js', () => { // 应用新逻辑 }); module.hot.dispose(() => { // 清除定时器、EventSource、全局监听器等 }); } - 容易踩的坑：在
accept回调里直接修改全局变量或未受控的 DOM，可能导致状态不一致；应优先走框架层更新机制（如 React Fast Refresh、Vue HMR 插件）
为什么有时改了 CSS 还是整页刷新？
表面是 CSS，实际是 HMR 链路某环断裂。常见断点不在样式本身，而在依赖它的 JS 模块。
- 典型场景：某个
App.jsimport 了style.css，但App.js本身没写module.hot.accept；当 CSS 更新，HMR runtime 尝试向上追溯依赖，发现App.js不接受更新，只能降级为全量刷新 - 验证方法：打开浏览器 DevTools → Network，看是否有
main.hash.hot-update.json和对应.hot-update.js请求成功；若只有 JSON 无 JS，说明编译生成失败或路径不匹配 - 配置陷阱：
output.publicPath错误会导致 HMR 客户端无法正确请求补丁资源，表现为静默失败（无报错，但无更新）
真正卡住 HMR 的从来不是 CSS 或 JS 的语法差异，而是模块之间 accept 边界的定义是否完整 —— 少一个 module.hot.accept，就可能让整个依赖链退回刷新模式。
