In previous interviews, many interviewers have mentioned the principle of HMR. Just as the react project needs debugging, I would like to summarize this.

Webpack-dev-server is often used during development, and one of its built-in features is live reloading by default. Run Webpack Serve from the command line, and if you change any source files and save them, Webpack-dev-server will automatically refresh the browser after compiling the code.

The disadvantage is that if we need to do something first, such as open a dialog box, then debug the style of the dialog box. Or, after some specific queries, debug the style of a list. If the browser refreshes after a code change, you need to verify the change by opening a dialog or performing a specific query. HMR, or hot Module replacement, solves this problem by preserving the application state that is lost during a full page reload, allowing only the modified modules to be updated at run time without a full refresh. Webpack-dev-server supports hot mode, which attempts to update with HMR before attempting to reload the entire page.

This article will explain module hot update from two aspects of configuration principle and implementation principle.

The configuration principle

We can see from the hot module update section of the official document “Guide” that we want to apply the hot module update capability of WebPack in two steps:

1. Add hot: true to the devServer configuration.

devServer: {
  contentBase: './dist',
+ hot: true,
},
Copy the code

2. When importing modules, check for updates with module.hot.accept.

if (module.hot) { module.hot.accept('./print.js', function() { document.body.removeChild(element); element = component(); / / to render the "component", in order to update the click event handler document. The body. The appendChild (element); })}Copy the code

However, in style-loader and CSS-loader, the HMR API such as module.hot.accept is called internally to check for style updates, so there is no need to add additional code to load the updated code. After the CSS dependency module is updated, it is patched to the <style> tag.

Along the same lines, the community provides many other Loaders and examples that allow HMR to interact smoothly with various frameworks and libraries, including React Hot Loader, Vue Loader, Angular HMR.

Vue Loader automatically loads Vue file updates when importing them. Here we will focus on the HMR application in the React framework. The React Hot Loader originally used by the React framework has been officially announced to be replaced by the React-refresh webpack-plugin. On its official website, we can see how it was introduced, and there are two points that need to be emphasized:

1. The startup command – hot and webpack configuration of new webpack HotModuleReplacementPlugin () cannot be used at the same time. (github.com/webpack/web…

2. Do not use the externals configuration in the WebPack debugging environment. Otherwise, the react-refresh-webpack-plugin will fail.

Realize the principle of

Here we first through a network map to overview:

  1. Modify and save code in the editor.
  2. HotModuleReplacementPlugin will generate the corresponding update code patch files.
  3. Update information and corresponding patch files are sent to webpack-dev-server through Webpack.
  4. Through the WS protocol interface, webpack-dev-server sends messages to webpack-dev-server/client running in the browser to inform the browser that there are file updates.
  5. Webpack-dev-server /client passes the previously packaged hash value to hot /dev/server, which acts as the main interface of all packaged JS files.
  6. Hot /dev-server tells Webpack to introduce the JSONP request library to request the manifest and chunk files from Webpack-dev-server.
  7. The HMR Runtime transfers the requested file to the corresponding React-Loader HMR or style-loader HMR to update the corresponding module of the runtime App.
  8. If the update fails, degrade to refresh the page.

Use the create-react-app scaffolding to initialize a React project:

During the initialization process, webpack-dev-server establishes a WS connection with webpack-dev-server/client, and sends the initialization message to webpack-dev-server/client. One of the more important is to draw the red box of the hash value, said the next HotModuleReplacementPlugin in packaging patch file, use the hash.

When the code in the editor changes, webpack-dev-server sends two invalid messages to webpack-dev-server/client and passes a hash value for the next package.

After that, webpack-dev-server/client will trigger hot/dev-server to call JSONP and send a request to request the patch file which is composed of the hash value transmitted during initialization. There are two patch files: hash.hot-update.json and chunk name. hash.hot-update.js. Hash.hot-update. json file also contains the hash value to be used in the next package, and the chunk. hash.hot-update.js file contains the webpackHotUpdate function composed of updated packages. This function will be passed to the appropriate loader to update the corresponding package.

At this point, the process of HMR is roughly analyzed.

Reference: rajaraodv.medium.com/webpack-hot…