preface

At the end of last year, I wrote an article on hot update of front end. The last article mainly talked about the principle of hot refresh. If you are interested, you can have a look. This article is about the principle of hot update, because the previous year was too busy (>_<), resulting in this article so late liver. So let’s get to the point.

Hot update (Hot Module Replacement) principle

The previous article focused on what a hot flush is, when to start it, and how to get rid of it. This article focuses on the discussion of local module overloading. Local module overloading, as its name implies, is when the browser changes without refreshing the page. Let’s start by looking at a simple interaction diagram of the WebPack hot refresh module.

practice

Next, let’s practice with flow chart. To modify the previous project, first of all, we need to download the webpack plug-in hot-module-replacement and use it. The way to use it is described here in the document, so there is no need to say too much.

  • First we webpack to initialize a project and importhot-module-replacementPlugins, here we use the previous project.
// webpack.config.js
const HotModuleReplacementPlugin = require("webpack").HotModuleReplacementPlugin
module.exports = {
    plugins: [...new HotModuleReplacementPlugin()
    ],
}
Copy the code
  • Here we modify the HMR code originally introduced into the client, but the server code remains unchanged. As you can see from the documentation, If already through HotModuleReplacementPlugin enabled Hot Module Replacement, it will be exposed to the Module interface. Hot and import. Meta. WebpackHot attribute.

Since we need to use the API on module.hot, we modify the HMR code written in client to webpack.

// webpack.config.js
module.exports = {
    entry: [
        ...,
        path.resolve(__dirname, "./client")]}Copy the code

Add the following code to 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."); // Establish a connection
  };
  socket.onmessage = function (msg) {
    console.log("msg", msg); // MSG is received
    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.");
}
Copy the code
  • When a file change triggers a recompile, a message is sent to the client and the client executesmodule.hot.check(true)

See the console at this pointnetworkWe can see that at this point the request reaches the currently compiled[hash].hot-update.jsonFile, according to this file introducedmainAs well asaOf the file[hash].hot-update.jsFile, triggeredrendercompleteHot Module Replacement. Of course in development we only need to usewebpack devServerYou can use hot updates

conclusion

Hot update for the front end of this topic on the end of the discussion of the article to write insufficient place, I hope you forgive me. I hope these two articles can be of some help to the updating of the university’s learning fever (>_<)