Webpack 热更新（HMR）原理详解

🔥 Webpack 热更新（HMR）原理详解

📌 本文适用于 Vue、React 等使用 Webpack 的项目开发者，适配 Vue CLI / 自定义 Webpack 项目。

🎯 一、什么是 HMR？

Hot Module Replacement 是 Webpack 提供的一种机制，使得浏览器在不刷新页面的前提下，只替换发生变化的模块代码。

它能做到的事：

• 修改 JS / CSS / Vue 文件时 页面不刷新
• 保持组件状态（如表单输入、滚动位置）
• 快速查看变更结果，极大提升开发效率

🧩 二、HMR 整体流程图

源码改动
   ↓
Webpack 重新编译生成新模块
   ↓
dev-server 通过 WebSocket 通知浏览器
   ↓
浏览器下载更新模块
   ↓
HMR runtime 应用新模块（替换/销毁旧模块）

⚙️ 三、核心模块组成

1️⃣ Webpack-dev-server（或 Vite 等 dev server）

• 启动本地服务，监听源码变更
• 内置 WebSocket 服务，用于通知客户端代码变化
• 静态资源由内存提供，不写入磁盘（性能高）

2️⃣ WebSocket 通信

浏览器连接到 dev-server 的 WebSocket 地址（如 ws://localhost:8080/sockjs-node）

当文件变动，Webpack 编译完成后，会通过 WebSocket 发送如下消息：

{
  "type": "update",
  "assets": [
    {
      "id": "./src/App.vue",
      "type": "js"
    }
  ]
}

3️⃣ HMR Runtime（客户端逻辑）

Webpack 构建时注入的 HMR Runtime 在浏览器中运行，主要做：

• 接收更新消息
• 下载新的模块代码（chunk）
• 执行模块的 accept、dispose 等钩子
• 更新页面 DOM 或组件状态

💡 四、源码级更新过程（详解）

以 Vue 项目为例（vue-loader + webpack-dev-server）：

1. 开发者修改了 App.vue
2. webpack-dev-server 监听到文件变动，触发 Webpack 编译
3. Webpack 编译出新的模块 App.vue?vue&type=template
4. webpack-dev-middleware 把变更信息推送给浏览器
5. 浏览器 HMR 客户端接收到变更，通过 JSONP 请求拉取更新模块
6. 模块执行 module.hot.accept() 回调，组件重渲染，但状态保留

🧪 五、HMR 接口示例（Node API）

if (module.hot) {
  module.hot.accept('./math.js', function () {
    console.log('math.js 模块更新了！')
  })

  module.hot.dispose(() => {
    console.log('清理旧模块资源')
  })
}

🧱 六、HMR 与普通 Live Reload 的区别

🧰 七、常见问题与解决方案

❓ 为什么我的项目没热更新？

• ✅ 是否使用了 webpack-dev-server 或 vite？
• ✅ devServer.hot = true 是否开启？
• ✅ 是否在代码中正确使用了 module.hot.accept()？
• ✅ 使用了不支持 HMR 的插件（如某些 CSS 插件）？

🔧 八、HMR 配置示例（webpack.config.js）

const webpack = require('webpack')

module.exports = {
  mode: 'development',
  devServer: {
    hot: true, // 启用 HMR
    static: './dist',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

Vue CLI、Create React App 等已默认配置好 HMR

🧠 九、在框架中的实现（Vue / React）

Vue 中的 HMR（vue-loader 实现）

// App.vue
export default {
  name: 'App',
  mounted() {
    console.log('App Mounted')
  }
}

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    console.log('模块更新！', newModule)
  })
}

React 中的 HMR（react-refresh 实现）

import { hot } from 'react-hot-loader/root'
const App = () => <div>Hello</div>
export default hot(App)

✅ 十、总结

热更新的真正威力在于：快速反馈 + 状态保留 + 节省时间，在现代前端开发中是不可或缺的一部分。