Let’s talk about hot module update, which is often talked about in the workplace, and often asked in interviews. Git repository: webpack-demo

1, HMR

  • HMRWhat is Hot Module Replacement for? That is, you can update a status in real time without having the browser refresh.
  • You might understand it by taking a concrete example, like we’re going to take adivWhat is the most direct and convenient way to change the color of the block from white to black? You don’t go to the editor and change the code and wait for the browserrefreshTo see the effect; Instead, just open the debug tool and change its color to see the effect.
  • There’s a little bit of a problem with the first way, assuming you have thisdivThe block is hidden by default and requires a certain click step before it can be displayed and you change the code to cause the browserrefreshAfter the destruction of this state, then it is necessary to restore the front click operation, to see the effect.
  • Extreme. Now I want to see thisdivThe color of the block becomes black, and to make it show the pre-configuration operation needs to click 100 times, you say hello not easy to click 100 times to make thisdivYou change the code in the editor, the browser refreshes, and you have to do it again. Why is it so hard just to see the effect of a color?
  • So with all this talk, back to the beginning,HMRThis is the thing that allows you to change white to black in the code editor without having the browser refresh.
  • Of course, all of this is my own interpretation,HMRIs to help you to improve the development efficiency, in fact, I don’t think what, at least not big role, may I business development involves the page more dishes, cut the browser you be careful when you refresh will refresh, as long as you don’t like WeChat developer tools changed code but sometimes don’t refresh… Oh, my God…

2, set up

  • This is set up in conjunction with the devSever configuration item in webpack, as discussed in chapter10 earlier. –> 10, webpack from 0 to 1-devServer data request

  • Configure the devServer parameter hot:true, which indicates that hot module update is enabled.

module.exports = {
// ...
  / / configuration Server
  devServer: {
    contentBase: "./dist".port: "8080".open: true,
+   hot: true,},// ...
}
Copy the code

  • Then will say that there are a lot of previous articles need to introduce a plug-in, a webpack own HotModuleReplacementPlugin plug-ins, such as at the moment of webpack demo Chinese documents are demonstrated in this way, but you will find the latest document, go to the English When you set hot: True, the plugin will automatically introduce you, so you don’t need to configure this step at all. The Chinese documentation is still a bit behind, but that’s ok.

  • If you have your own demo written according to mine, you will find that HRM has no effect when you get here. Why? Because we used the MiniCssExtractPlugin to replace style-loder in the previous chapter for code segmentation of CSS, and the hot module update of CSS needs the style-loader to cooperate with it, so we need to delete the content of setting CSS code segmentation.

- const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
// ...
  devServer: {
    contentBase: "./dist".port: "8080".open: true.hot: true,},module: {
    rules: [{test: /\.css$/.use: [
-         MiniCssExtractPlugin.loader, 
+         "style-loader"."css-loader"."postcss-loader"]},]}// ...
}
Copy the code
  • I’m just going to show you how to remove the CSS,less,sassandpluginsAnything in there that deals with code splitting needs to be removed and replaced. And then let’s do it in a different colorHRMYou will see that the browser does not refresh and the color changes.
The default state Click On Body to generate footer Change it to a fan in the editor

3, the principle of

  • Although we now cooperate webpack dev – this plug-in server, set up a hot: true can open the HRM, webpack automatically help us introduce HotModuleReplacementPlugin this plug-in, so, the realization of the HRM must be related to the two plug-ins.

  • To summarize the process:

    1. First of all, a server was established through the webpack-dev-server plug-in, the communication between the client and the server was established, and the packaged and compiled DIST file was put into the memory, which was mentioned above.

    2. When we first hot pack compile time – the module – replacement – the plugin. This plugin will generate a hotModuleReplacement runtime. Js file and injected into the master file. The main bundle. Js, There are some logical correlation, callback functions and so on.

    3. Then when we change the code and repackage and compile it again, we will see some xxx.hot-update.js files generated. This is the premise;

    4. File changes, this time the server will notify the client: brother, I have a situation here!!

    5. When our customer receive the news, hotModuleReplacement. Runtime. Js method would began to perform, he will send the service side ajax request, and then the server contains the updated information of XXX. Hot – update. Js to the client.

    6. The client knows what has changed by combining it with the hot-update.js file and then updates the code locally.

  • The above is my understanding may have a misunderstanding, at the end of the article posted a link to the big guy’s article, go and have a look yourself.

4, summary

  • All right. I found it to be useful, and it’s awesome, to take back what I said at the beginning about HMR not having eggs.
  • Through the configuration of HRM in this chapter, we can know that HRM cannot exist together with code segmentation. HRM only exists in the development environment, while code segmentation only exists in the production environment. Therefore, we will separate them in the next chapter and settle down separately.Reference links:

    zhuanlan.zhihu.com/p/30623057

    Juejin. Cn/post / 684490…

    Webpack.js.org/concepts/ho…