说说 webpack 的热更新是如何做到的？原理是什么？

最新推荐文章于 2024-05-08 07:00:02 发布

路人贾！

最新推荐文章于 2024-05-08 07:00:02 发布

阅读量245

点赞数

文章标签： webpack 运维前端

本文链接：https://blog.csdn.net/m0_71125105/article/details/131589004

版权

说说 webpack 的热更新是如何做到的？原理是什么？

简版
是什么
实现原理
总结

简版

Hot Module Replacement，简称 HMR，在不需要刷新整个页面的同时更新模块，能够提升开发的效率和体验。热更新时只会局部刷新页面上发生了变化的模块，同时可以保留当前页面的状态，比如复选框的选中状态等。

在 webpack 中配置开启热模块也非常的简单，如下代码：

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true,
    // hotOnly: true
  },
}

热更新的实现

webpack-dev-server 启动的时候会做三件事情

启动 webpack，生成 compiler 实例，compiler 实例的功能很多，比如用来启动 webpack 的编译工作，监听文件变化等。
使用 Express 启动一个本地服务，使得浏览器可以访问本地服务
启动 websocket 服务，用于浏览器和本地 node 服务进行通讯。

监听文件变化

webpack 监听文件变化主要是通过 webpack-dev-middleware 这个库来完成，它负责本地文件的编译、输出和监听 webpack-dev-middleware 中执行了 compiler.watch 方法，它主要做了两件事情

对本地文件编译打包
编译结束之后，开启监听，文件发生变化时重新编译，并持续进行监听
监听 webpack 编译结束

setupHooks 方法用来注册监听事件，当监听到 webpack 编译结束时，通过 websocket 给浏览器发通知，浏览器拿到 hash 只之后就可以做检查更新逻辑。

是什么

HMR全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用

例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失

如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用

在webpack中配置开启热模块也非常的简单，如下代码：

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true,
    // hotOnly: true
  },
}

通过上述这种配置，如果我们修改并保存css文件，确实能够以不刷新的形式更新到页面中

但是，当我们修改并保存js文件之后，页面依旧自动刷新了，这里并没有触发热模块

所以，HMR并不像 Webpack 的其他特性一样可以开箱即用，需要有一些额外的操作

我们需要去指定哪些模块发生更新时进行HRM，如下代码：

if (module.hot) {
  module.hot.accept('./util.js', () => {
    console.log('util.js更新了')
  })
}

实现原理

首先来看看一张图，如下：
在这里插入图片描述

Webpack Compile：将 JS 源代码编译成 bundle.js
HMR Server：用来将热更新的文件输出给 HMR Runtime
Bundle Server：静态资源文件服务器，提供文件访问路径
HMR Runtime：socket 服务器，会被注入到浏览器，更新文件的变化
bundle.js：构建输出的文件
在 HMR Runtime 和 HMR Server 之间建立 websocket，即图上 4 号线，用于实时更新文件变化

上面图中，可以分成两个阶段：

启动阶段为上图 1 - 2 - A - B
在编写未经过webpack打包的源代码后，Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle文件，传输给Bundle Server 静态资源服务器
更新阶段为上图 1 - 2 - 3 - 4
当某一个文件或者模块发生变化时，webpack监听到文件变化对文件重新编译打包，编译生成唯一的hash值，这个hash值用来作为下一次热更新的标识

根据变化的内容生成两个补丁文件：manifest（包含了 hash 和 chundId，用来说明变化的内容）和chunk.js 模块

由于socket服务器在HMR Runtime 和 HMR Server之间建立 websocket链接，当文件发生改动的时候，服务端会向浏览器推送一条消息，消息包含文件改动后生成的hash值，如下图的h属性，作为下一次热更细的标识
在这里插入图片描述
在浏览器接受到这条消息之前，浏览器已经在上一次socket 消息中已经记住了此时的hash 标识，这时候我们会创建一个 ajax 去服务端请求获取到变化内容的 manifest 文件