Hot Module Replacement is a very useful and powerful feature of webpack. When we modify and save the file code, webpack will recompile the packaged file code and send the new module code to the client. The browser replaces the old module with the new module, so as to update the application without refreshing the browser.

Preface

Before HMR, after we update and save the file code, if we want to view the updated content, we often need to manually refresh the browser.

But fortunately, there are also some live reload tool libraries that can monitor file changes and notify the browser to refresh the page. This helps us reduce repetitive operations.

But why do you still need HMR?

When the browser refreshes, it also means that the current page status is lost. For example, we open a pop-up window, and then we modify and save the code logic of the pop-up window. After the browser refreshes, the pop-up window is closed. We need to re-interactively open the pop-up window. This will undoubtedly increase a lot of repetitive and meaningless workload and time.

The role of HMR is to not only help us update the application code without refresh, but also retain the application status, allowing us to avoid it. Repeat operations a lot to improve development efficiency.

Module Hot Replacement

The HMR - Hot Module Replacement feature replaces, adds or deletes modules during the application run without reloading the entire page.

Enable

The way to enable HMR is very simple, View official documentation

Features

HMR has several characteristics:

• Keep the application state lost when the page is completely reloaded.
• Update only changes to save valuable development time.
• Adjusting styles is faster - almost equivalent to changing styles in the browser debugger.

Basic HMR Process

• Step 1:

In webpack watch mode, listen to whether a file in the file system has been modified. When a file is changed, Recompile and package the module according to the configuration file**, and save the packaged code in memory through JavaScript objects.

• Step 2:

webpack-dev-middleware calls webpack's API to monitor the changes in code and notify webpack to package the code into memory.

• Step 3:

webpack-dev-server listens for file changes. Unlike the first step, this step does not listen for code changes and recompile and package. When devServer.watchContentBase is configured in the configuration file true, The server will listen to changes in static files in the configured folder. If there is a change, the browser will notify the browser to perform live reload, which means refreshing the page.

• Step 4:

webpack-dev-server establishes a long websocket connection between the browser and the server through sockjs. Tell the browser the status information of each stage of webpack compilation and packaging, and also includes the information on the server listening for changes in static files in the third step. The browser side performs different operations based on these socket messages. Among them, the most important information passed by the server is the hash value of the new module. The subsequent steps replace the module according to the hash value.

• Step 5:

Although webpack-dev-server will inform the browser of the packaging status, it will not request updated code on the webpack-dev-server/client side. Nor will the hot module replacement be performed, and these work will be returned to webpack/hot/dev-server. webpack/hot/dev-server According to the information passed to it by webpack-dev-server/client, as well as the configuration information of dev-server, To decide whether to refresh the browser or perform hot module replacement.

• Step 6:

In the client, HotModuleReplacement.runtime accepts the hash value of the new module passed to it in the previous step, Send an Ajax request to the server side through JsonpMainTemplate.runtime, and the server side returns a json. The json contains the hash values ​​of all modules to be updated. After obtaining the list of modules that need to be updated, a jsonp request is sent. Get the latest module code.

• Step 7:

HotModulePlugin will compare the old and new modules to decide whether to update the module. After deciding to update the module, check the dependencies between modules. While updating the module, update the dependency references between modules. This step also determines whether the HMR is successful.

• Step 8:

If the HMR fails, it falls back to the live reload operation and get the latest packaged code by refreshing the browser.