热更新失效的根本原因是hmr链路中断，需依次关闭webstorm的safe write、禁用devserver的livereload、显式设置target: 'web'、补全框架运行时插件，并确保import路径大小写与磁盘一致。
热更新失效不是 WebStorm 的锅，而是它和 Webpack 协作时几个关键链路断了——关掉 safe write 只是第一步，真正卡住 HMR 的往往是配置或环境层面的隐性问题。
WebStorm 的 safe write 必须关闭
WebStorm 默认启用 safe write，修改文件先写入临时位置，再原子替换。Webpack 的 watcher 监听的是磁盘真实路径，临时文件不触发变更事件，自然不编译也不热更。
- 路径：
Settings → System Settings → Synchronization（旧版）或Settings → Appearance & Behavior → System Settings（新版） - 取消勾选
Safe write（有的版本叫Use "safe write" (save changes to a temporary file first)） - 改完立刻生效，无需重启 WebStorm，但已启动的 devServer 需要重启才能重新监听
devServer 配置里 hot 和 liveReload 冲突了
Webpack Dev Server 的 HMR 和 liveReload 是互斥通道。只要 liveReload: true（默认值），哪怕 hot: true，浏览器也会走整页刷新，而不是模块级热替换。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 检查
webpack.config.js或vue.config.js中的devServer字段 - 确保显式设置：
hot: true、liveReload: false - 如果用 Vue CLI，
vue.config.js里直接写：module.exports = { devServer: { hot: true, liveReload: false } } - 避免通过命令行传参覆盖，比如
npm run serve -- --live-reload会重置配置
Webpack 5 的 target 默认值破坏 HMR
Webpack 5 引入了 target: 'browserslist' 作为默认值，但它不启用模块热替换能力。没有显式声明 target: 'web'，HMR 插件就形同虚设。
- 在
webpack.config.js顶层对象中加一行：target: 'web' - 同时检查项目根目录是否有
.browserslistrc或package.json里的browserslist字段，它们会触发该默认行为 - 删掉或注释掉
browserslist配置后，target退回到'web'，HMR 日志才会出现[WDS] Hot Module Replacement enabled.
React/Vue 项目还差一个运行时补丁
Webpack 原生 HMR 只负责替换模块并执行新代码，对 React 函数组件或 Vue Composition API 组件来说，这等于重渲染丢状态。真正保态热更，得靠框架专用插件。
- Vue 2 + webpack：确认
vue-style-loader和vue-hot-reload-api已启用（通常 vue-loader 自带） - Vue 3：需手动引入
@vue/compiler-sfc并确保vue-loader版本 ≥17 - React：必须装
@pmmmwh/react-refresh-webpack-plugin，且 Babel 配置里加react-refresh/babel - 漏掉任一端，控制台可能没报错，但改组件只刷新页面，不保留 state 或 ref
最容易被忽略的是：Webpack 的 watch 机制对路径大小写敏感，而 macOS/Windows 文件系统默认不区分大小写。import 路径写成 @/components/Header.vue，实际文件是 header.vue，watcher 就不会响应——这种问题既不报错也不提示，只能靠全局搜索核对路径一致性。
