浅谈前端热更新(下)

前言

去年年底写过一篇《浅谈前端热更新》的文章，上一篇主要是讲了热刷新的原理，感兴趣的可以看一下。这篇文章是关于热更新的原理，因为之前年关实在太忙啦(>_<)，导致这篇文章这么晚才肝出来。接下来进入正题叭。

热更新（Hot Module Replacement）原理

前一篇文章，主要讲的是什么是热刷新、什么时候开始热刷新、如何去热刷新。本篇文章就主要围绕局部模块重载这一块讨论。局部模块重载顾名思义就是浏览器并没有进行刷新页面就发生了改变。首先我们先看一下 webpack热刷新模块的简单交互图。

实践

接下来我们就结合流程图实践一下看看。将之前的项目修改一下，首先我们需要下载一下hot-module-replacement 这个 webpack 插件，并且使用，使用方式在文档中有这里也就不用过多赘述了。

• 首先我们webpack初始化一个项目并引入hot-module-replacement插件，这里就使用之前的项目了。

// webpack.config.js
const HotModuleReplacementPlugin = require("webpack").HotModuleReplacementPlugin
module.exports = {
    plugins: [
        ...,
        new HotModuleReplacementPlugin()
    ],
}
复制代码

• 这里我们修改原本引入client的HMR代码，服务端的代码依旧保持不变。由文档可以知道，如果已经通过 HotModuleReplacementPlugin 启用了 Hot Module Replacement, 则它的接口将被暴露在 module.hot 以及 import.meta.webpackHot 属性下。

由于需要使用 module.hot 上的API所以我们修改写在client的hmr代码改为webpack打包引入。

// webpack.config.js
module.exports = {
    entry: [
        ...,
        path.resolve(__dirname, "./client")
    ]
}
复制代码

在 client.js 中加入以下代码

// client.js
if ("WebSocket" in window) {
  const address = "ws://localhost:3000";
  var socket = new WebSocket(address);
  socket.onopen = function () {
    console.log("[HMR] Live reload enabled."); // 建立连接
  };
  socket.onmessage = function (msg) {
    console.log("msg", msg); // 接收到msg
    if (module.hot) module.hot.check(true);
    else window.location.reload()
  };
;
} else {
    console.error("Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.");
}
复制代码

• 当监听到文件改动触发了重新编译后，向client发送了消息此时客户端执行了 module.hot.check(true)

此时看到控制台的 network 我们可以看到此时请求到了当前编译的 [hash].hot-update.json 文件，依据这个文件引入了 main 以及 a 的文件的 [hash].hot-update.js 文件，触发了 render 完成 Hot Module Replacement。当然在开发中我们只需要使用 webpack devServer 就可以使用热更新

总结 

对于前端热更新这一个话题的讨论就结束啦 文章写的不足的地方，希望大家见谅。 希望通过这两篇文章能对大学的学习热更新道路有点点帮助(>_<)