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 import
hot-module-replacement
Plugins, 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 executes
module.hot.check(true)
See the console at this pointnetwork
We can see that at this point the request reaches the currently compiled[hash].hot-update.json
File, according to this file introducedmain
As well asa
Of the file[hash].hot-update.js
File, triggeredrender
completeHot Module Replacement
. Of course in development we only need to usewebpack devServer
You 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 (>_<)