Webpack 热更新实现原理分析

概述

在使用 Webpack 构建开发期时，Webpack 提供热更新功能为开发带来良好的体验和开发效率，那热更新机制是怎么实现的呢？

代码实现

• Webpack 配置添加 HotModuleReplacementPlugin 插件

new webpack.HotModuleReplacementPlugin({
  // Options...
})

• Node Server 引入 webpack-dev-middlerware 和 webpack-hot-middleware 插件，如果是 koa 引入对应的 koa-webpack-dev-middlerware 和 koa-webpack-hot-middleware

 const devMiddleware = require('koa-webpack-dev-middleware')(compiler, {
  publicPath,
   stats: {
    colors: true,
    children: true,
    modules: false,
    chunks: false,
    chunkModules: false,
  },
  watchOptions: {
    ignored: /node_modules/,
  }
});

app.use(devMiddleware);
const hotMiddleware = require('koa-webpack-hot-middleware')(compiler, {
   log: false,
   reload: true
});
app.use(hotMiddleware);

• entry 注入热更新代码

webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=true&quiet=false

这里注入热更新代码是关键，保证服务端和客户端能够通信。

热更新一探

首先我们启动 egg-vue-webpack-boilerplate 应用，通过 chrome-dev-tool 看看首次打开页面前端和后端通信是如何建立的？

webpack-hot-update.png

1. Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)
2. 页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
3. 客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
4. 修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
5. 客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
6. hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。

关键代码

• webpack-dev-middleware/client
• webpack-dev-middleware/middleware