WebStorm运行Webpack热更新失效需依次关闭safe write、禁用liveReload、显式设置target: 'web'、补全框架运行时插件，并确保import路径大小写与磁盘一致。
Sublime Text 的 atomic save 会阻断 Webpack 文件监听
Webpack 的 watcher 默认监听真实磁盘路径，而 Sublime Text 默认开启 atomic save（先写临时文件再原子替换）。这个临时文件不会触发 inotify/fsevents 事件，导致 Webpack 检测不到变更，最终 fallback 到轮询或静默失败——但更常见的是 devServer 在超时后强制整页刷新。
关闭方法：Preferences → Settings，在右侧用户配置中添加：
"atomic_save": false
注意：改完无需重启 Sublime，但已运行的 webpack serve 必须重启才能重新建立监听句柄。如果用的是 webpack-dev-server CLI，确保没加 --watch-aggregate-timeout 这类干扰参数。
devServer 配置里 liveReload 和 hot 同时启用会互相覆盖
只要 liveReload: true（默认值），哪怕 hot: true，浏览器端也会优先走 livereload.js 的整页刷新通道，HMR runtime 根本没机会执行。
必须显式禁用 liveReload：
- 在
webpack.config.js的devServer字段里写死：hot: true、liveReload: false - 避免命令行覆盖：比如
npx webpack serve --live-reload会重置配置 - 若用 Vue CLI，直接在
vue.config.js中设置，不要依赖vue-cli-service serve的默认行为
入口文件没注入 HMR runtime 或模块没 accept 导致静默降级
Webpack 5+ 默认不再自动注入 HMR runtime，尤其当你手动配置了 entry 数组时。如果入口里漏了 webpack/hot/only-dev-server 或等效模块，HMR 就只是个摆设。
检查入口配置是否包含以下之一：
-
'webpack/hot/only-dev-server'（推荐，不 fallback 到刷新） -
'webpack/hot/dev-server'（兼容旧版，但出错时会整页刷新）
同时确认业务代码里有对应 module.hot.accept，例如：
if (module.hot) {<br> module.hot.accept('./App', () => {<br> render();<br> });<br>}
没有这一步，即使 HMR 链路通了，变更也只会触发页面 reload。
node_modules 里某些 loader 或插件破坏 HMR 链路
常见坑点是 babel-loader 或 ts-loader 配置了 cacheDirectory: true，但缓存路径权限异常或跨盘符，导致增量编译结果错乱；或者用了 fork-ts-checker-webpack-plugin 却没配 async: false，类型检查阻塞 HMR 流程。
临时排查法：注释掉所有非必要插件，只留 HotModuleReplacementPlugin 和基础 loader，看是否恢复局部更新。重点盯住：
-
babel-loader的cacheDirectory路径是否存在、可写 -
ts-loader是否启用了transpileOnly: true（必须开，否则 TSC 全量检查会卡住 HMR） - 第三方 UI 库（如 Ant Design）的按需加载插件是否注入了非 HMR-safe 的运行时逻辑
HMR 不是开关，是一条链。Sublime 改一行，到页面局部更新，中间要过编辑器写入、文件系统通知、Webpack 增量编译、WebSocket 推送、客户端拉取、runtime 替换六个环节——任一环松动，就退回整页刷新。最常被忽略的是入口 runtime 注入和模块 accept 逻辑，这两处没做，前面全白搭。
