Webpack 热更新（HMR）原理详解

原创于 2025-06-29 10:59:09 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

🔥 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）：

开发者修改了 App.vue
webpack-dev-server 监听到文件变动，触发 Webpack 编译
Webpack 编译出新的模块 App.vue?vue&type=template
webpack-dev-middleware 把变更信息推送给浏览器
浏览器 HMR 客户端接收到变更，通过 JSONP 请求拉取更新模块
模块执行 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 的区别

特性	HMR	Live Reload（全刷新）
刷新页面	❌ 不刷新	✅ 整页刷新
状态是否丢失	❌ 状态保留（如表单输入）	✅ 状态丢失
应用速度	⚡ 快速（只替换模块）	🐢 慢（页面重新加载）
用途	JS/CSS/Vue 组件等模块级更新	HTML 等非模块文件的更新

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

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

✅ 是否使用了 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)

✅ 十、总结

模块	作用
webpack-dev-server	启动服务 + WebSocket 通信
Webpack Runtime	管理模块热更新逻辑，替换更新模块
HMR API	提供 `accept` / `dispose` 等钩子
WebSocket 通道	通知浏览器代码更新

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