Webpack Hot Module Replacement

Webpack Hot Module Replacement (HMR), which updates all types of modules without completely refreshing the entire page, is one of the most useful features Webpack provides.

HMR as a Webpack built-in function, can pass – hot or HotModuleReplacementPlugin open.

How does Webpack implement hot updates? Firstly, the communication between the browser and the server is established through SSE one-way channel. The browser will receive the message pushed by the server. If hot update is needed (comparing whether the hash value of the file is different before and after compilation), the browser initiates AN HTTP request to the server to obtain the packaged resource resolution and partially refresh the page.

Let’s look at the implementation.

Webpack build

After the project is started, the first build package is performed, and the entire build process is printed in the console with a Hash value 3606e1AB1DDCF6626797.

After each code change, you can see in the console that the Hash value in the packaging information is updated, and the Hash value from the last output is identified as the newly generated Hmr file for this compilation. Similarly, the Hash value will be used as the identifier of the next hot update.

If nothing is changed, save it directly and the console outputs compilation and packaging information without changing the Hash value.

Server-side compilation

Why are changes saved automatically compiled and repackaged? This series of rechecks builds files that rely on Webpack listening: After the project is started, Webpack will start the compilation and construction process through the Run method of the Compiler class. After the compilation is completed, the Watch method will be called to monitor the file changes. When the file changes, it will be recompiled and continue to monitor after the compilation.

How do you pass the Webpack compiled and packaged files to a Web server that you rely on to access your pages? That’s where Webpack-dev-Middleware comes in. Webpack-dev-middleware is a wrapper, It can send webpack-processed files to a Server (where Webpack-dev-server has webpack-dev-Middleware and Express servers built in). While compiled files are written to memory, the Webpack-dev-Middleware plugin uses memory-FS for static resource requests to access memory files directly.

constwebpack = require(‘webpack’);

constwebpackConfig = require(‘./webpack.dev.conf’);

constcompiler = webpack(webpackConfig);

Debug (‘ Webpack compiled ‘);

Debug (‘ will compile and stream through webpack-dev-middleware’);

constdevMiddleware = require(‘webpack-dev-middleware’)(compiler, {

// self-define options

});

The watch method in Webpack monitors file changes in real time. The watch method in Webpack monitors file changes in real time. Recompile the package and write to memory, and the Webpack-dev-Middleware plug-in accesses memory files via memory-FS via static resource requests and passes them to the Web server.

The server communicates to the browser

The Webpack-hot-Middleware plugin provides communication between the browser and the Webpack server, and receives updates from the Webpack server on the browser side. There is always a __Webpack_hmr request in the browser Network during development. Click on it and you will see the EventStream (server side EventStream, server push message to browser, In addition to websocket full-duplex channel two-way communication, there is another one-way channel communication method, server-sent Events. Only the Server can push messages to the browser through stream information. The page can use the EventSource instance to receive an event notification from the server and trigger the onMessage event) and update the message content every 2 seconds, each line with the ❤️ icon, which is a heartbeat request.

When we save the code, WebPack starts to recompile the package. After the package is finished, the server notifies the browser through SSE long connection, and the browser starts to request the hot-update file generated by WebPack to compare whether the hash value has changed. If the hash value is the same, the resource will not be requested. Otherwise, the browser starts requesting resources through JSONP based on the module identity that needs to be updated in hot-Update.

conclusion

  • First, in WebPack’s Watch mode, WebPack will listen for file changes, recompile and package the module according to the configuration file, and save the packaged code in memory

  • The second step is the interface interaction between Webpack-Dev-server and Webpack. Dev-server’s middleware calls the API exposed by Webpack to monitor code changes and tells WebPack to pack the code into memory

  • The third step is webpack-dev-server to monitor the file changes, after the changes will notify the browser side to live reload the application

  • The fourth step is also the work of the Webpack-dev-server code. This step mainly establishes a long connection between the browser and the server through SSE, and informs the browser of the status of webpack compilation and packaging. The most important information transmitted by the server is the hash value of the new module. Module hot replacement is then performed based on the hash value

  • Webpack-dev-server does not request updated code and does not perform hot module operations, which are handed back to Webpack, whose job is to decide whether to refresh the browser or hot update the module based on the information passed to it by the client and the configuration of dev-Server. If you just refresh the browser, there are no further steps

  • Hmr. Runtime is the backbone of the client HMR. It receives the hash value passed to its new module, sends an Ajax request to the server, and the server returns a JSON update list to retrieve the latest module code

  • HotModulePlugin will compare old and new modules to determine whether to update them, and if so, check the dependencies between modules and update the dependencies at the same time

  • Finally, when the HMR fails, we fall back to live Reload, which is a browser refresh to get the latest packaging code

The browser update view process will continue to be updated…