WebStorm按Ctrl+S无热更新，本质是底层开发服务器未启用HMR或WebSocket断连；需确认终端用npm start、检查webpack配置hot:true且liveReload:false、安装react-refresh-webpack-plugin，Vite则开箱即用。
React项目里WebStorm按Ctrl+S没反应？先确认HMR是否真在跑
WebStorm本身不提供HMR能力，它只是触发保存动作的“手”，真正干活的是Webpack DevServer或Vite这类工具。按Ctrl+S没热更新，大概率不是IDE配置错了，而是底层开发服务器压根没启用HMR，或者浏览器没连上WebSocket通道。
- 打开浏览器开发者工具 → Console 标签页，搜索
[WDS]或HMR字样：如果看到[WDS] Hot Module Replacement enabled.才算真正启动了 - 如果只看到
[WDS] Live Reloading enabled.，说明当前是传统刷新模式，hot: true没生效，或被liveReload: true覆盖了 - 检查终端里启动命令是否用了
npm start（对应react-scripts start）——这是Create React App默认开启HMR的唯一可靠方式；别用webpack serve却忘了加--hot
webpack.config.js里必须写的三行HMR配置
如果你没用Create React App，而是自己配Webpack，光写 hot: true 是不够的。Webpack 5+虽然内置了HMR插件，但老项目或自定义配置中仍常漏掉关键项。
-
devServer.hot设为true（必须） -
devServer.liveReload设为false（否则CSS改完还是整页刷） -
plugins数组里显式添加new webpack.HotModuleReplacementPlugin()（Webpack 4及更早版本强制要求；Webpack 5可省略，但加上更稳妥）
示例片段：
devServer: {
hot: true,
liveReload: false,
port: 3000
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
React组件热更新失效？90%是因为没装react-refresh-webpack-plugin
Webpack原生HMR对JS模块只做“替换并重执行”，但React函数组件一旦重执行，状态就丢了。真正实现“组件级保态热更新”的，是 react-refresh-webpack-plugin —— 它会注入运行时补丁，劫持组件渲染逻辑。
- 仅靠
module.hot.accept手动写是没用的，React官方已不推荐这种写法 - 安装插件：
npm install -D @pmmmwh/react-refresh-webpack-plugin - 在
webpack.config.js中引入并配置（注意要配合react-refresh/babelBabel插件） - 若用Vite，直接开箱即用，无需额外配置——这也是为什么Vite项目在WebStorm里Ctrl+S响应更快
WebStorm设置里唯一要动的两个开关
IDE层面只需确保“保存即触发构建链路”，其余交给工具链。别折腾什么“自动上传”“远程部署”，那和HMR无关。
- 进
Settings/Preferences → Tools → Actions on Save，勾选Run file watchers（如果你用了Sass/Less等需要编译的资源） - **不要**勾选
Rebuild project或Compile TypeScript—— 这些会触发全量编译，反而拖慢热更新速度 - 确认
JavaScript language version设为ES6+（否则Babel插件可能不生效）
Failed to fetch 或 Disconnected from dev server，比翻十遍配置更管用。 
