Webpack热更新需配置与代码配合才能实现局部刷新，仅开启devServer.hot:true默认触发整页重载；服务端启用HMR、客户端用module.hot.accept()接管变更；CSS天然支持局部更新；JS状态需通过module.hot.data手动保持。
Webpack 的热更新（HMR，Hot Module Replacement）不是“自动生效”的功能，它需要配置 + 代码配合才能实现真正的局部刷新。只开 devServer.hot: true，默认只会触发整页重载（即 Live Reload），而不是你想要的“改哪儿、刷哪儿、状态不丢”。关键在于：**服务端开启 HMR 能力，客户端主动接管模块变更逻辑**。
1. 基础配置启用 HMR 机制
确保 webpack 配置中正确启用 HMR 支持：
- webpack.config.js 中设置 devServer.hot = true（webpack 5+ 已内置插件，无需手动添加 HotModuleReplacementPlugin）
- 推荐同时设
devServer.hotOnly = false（允许 fallback 到页面刷新，避免 HMR 失败时白屏） - 确保入口文件（如
src/index.js）被正确加载，且 dev-server 能监听到改动
2. JS 模块需手动接入 HMR 接口
Webpack 不会自动替换任意 JS 模块——必须在模块内显式调用 module.hot.accept() 才能捕获变更并执行局部更新逻辑：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在要热更新的模块顶部或底部加入判断：
if (module.hot) { module.hot.accept('./xxx.js', () => { /* 更新逻辑 */ })} - 例如：修改一个渲染函数，可在 accept 回调里重新调用该函数，或替换 DOM 内容，而不清空整个容器
- 若未写
module.hot.accept，即使配置了 HMR，该 JS 文件改动后仍会触发整页刷新
3. CSS/样式类天然支持局部热更
使用 style-loader + css-loader 时，CSS 文件改动默认就是局部替换：
立即学习“Java免费学习笔记（深入）”；
- 无需额外代码，保存 .css 或 .scss 文件，浏览器会直接 patch 样式规则
- 旧样式被移除，新样式注入，DOM 结构和用户输入状态（如 input value、checkbox checked）完全保留
- 这是 HMR 最“开箱即用”的场景，也是验证配置是否生效的最快方式
4. 状态保持靠开发者逻辑控制
HMR 本身不保存 JS 状态，但提供了接口让你自己维护：
- 利用
module.hot.data在模块更新前后传递数据（如计数器值、表单字段） - 在
accept回调中读取旧 state、更新 DOM、再写回新 state - 常见模式：
module.hot.dispose(() => { /* 保存当前状态到 hot.data */ })+module.hot.accept(() => { /* 从 hot.data 恢复并重绘 */ })
