先确认HMR是否启用：浏览器Console中出现[WDS] Hot Module Replacement enabled.才表示HMR已启动；若仅显示Live Reloading enabled.或无输出，则是devServer未启用HMR、liveReload未禁用、Safe write未关闭、target未设为web或缺少框架运行时插件所致。
WebStorm保存后没热更新，先看浏览器Console里有没有[WDS] Hot Module Replacement enabled.
没这条日志，说明HMR根本没跑起来，不是WebStorm的问题，而是底层服务配置漏了关键项。打开浏览器开发者工具 → Console，搜 [WDS] 或 HMR：
- 看到 [WDS] Hot Module Replacement enabled. → HMR已启用，问题在链路或框架层
- 只看到 [WDS] Live Reloading enabled. → 实际走的是整页刷新，hot: true 被覆盖或未生效
- 完全没输出 → devServer压根没启动，或者终端根本没跑 npm start / npm run dev
Webpack项目必须关掉WebStorm的Safe write，且devServer要显式禁用liveReload
WebStorm默认开启 Safe write，文件先写进临时路径再原子替换，Webpack watcher监听的是真实路径，临时文件不触发变更。
路径：Settings → Appearance & Behavior → System Settings，取消勾选 Use "safe write" (save changes to a temporary file first)。
改完不用重启IDE，但已运行的devServer必须 Ctrl+C 再重新启动。
同时检查 webpack.config.js 或 vue.config.js 中的 devServer 配置：
- 必须显式设为 hot: true
- 必须显式设为 liveReload: false（默认是 true，会压制HMR）
- 别用命令行参数覆盖，比如 npm run serve -- --live-reload 会重置配置
Vite或Create React App项目，别用WebStorm的“Open in Browser”
WebStorm右上角的 Open in Browser 按钮走的是内置服务器 http://localhost:63342/，和Vite的 http://localhost:5173/ 或 CRA 的 http://localhost:3000/ 完全无关——sourcemap对不上、WebSocket连不上、HMR自然失效。
正确做法：
- 终端手动执行 npm run dev（Vite）或 npm start（CRA）
- 浏览器手动访问终端输出的真实地址（如 http://localhost:5173/）
- WebStorm只负责编辑和保存，别让它接管服务启动或页面打开
Vue/React组件改了没重渲染？缺运行时插件或target没设成web
Webpack原生HMR只替换模块代码，不处理框架状态。Vue 3 或 React 函数组件需要额外插件才能保态热更：
Vue 3：确认 vue-loader ≥ v17，且项目中用了 @vue/compiler-sfc；
React：必须装 @pmmmwh/react-refresh-webpack-plugin 并配进 webpack.config.js 的 plugins 数组；
Vite 和 CRA 开箱即用，不用额外装插件。
另外，Webpack 5 默认 target: 'browserslist'，它不启用HMR能力。必须在 webpack.config.js 顶层加：
target: 'web'
否则即使配置全对，控制台也只打 [WDS] Live Reloading enabled.
真正卡住热更新的，往往不是某个开关没开，而是多个环节同时松动：Safe write开着、liveReload: true 没关、target 没设、框架插件没装——任意一个断掉，HMR就静默降级成手动刷新。
