In this section we’ll look at Webpack’s module hot update, also known as module hot replacement. The goal is to speed up development for users, improve the programming experience, and make it easier for developers to modify code and visually see changes on the page without having to refresh the page. This feature is primarily used during the development process and is of no help to the production environment.

What is module hot update

The full name of HMR is Hot Module Replacement, which means Hot update of Module in Chinese, and it is one of the most useful functions provided by Webpack. It allows you to replace, add, and remove various modules at run time without having to do a full refresh to reload the entire page. The “hot” in hot update can be understood as the module is running. Hot replacement is the replacement of the running module.

Hot update can significantly speed up development through the following ways:

  • Preserved the state of the application that was lost when the page was completely reloaded.
  • Update only the changed content to save development time.
  • Adjusting styles is faster, almost as much as changing styles in the browser debugger.

Enable hot updates

Starting the HMR is actually quite simple, using the webpack-dev-server plug-in and the HMR plug-in.

If you want to start Webpack’s development environment via webpack-dev-server, you can turn on the hot update switch for webpack-dev-server. For example, here is the demo code in the webpack.config.js configuration file:

Module. exports = {devServer: {hot: true, // turn on the hot update switch}}

In webpack. Config. Add HotModuleReplacementPlugin js plug-ins, because this plug-in is webpack own, if you can join directly:

module.exports = {
  plugins: [
    webpack.HotModuleReplacementPlugin(),
  ]
}

Hot-update LESS code compilation

In practice, we generally don’t write CSS code directly, but instead use CSS precompilers such as LESS, Sass, and Stylus to compile the written code into CSS code. Let’s use Less as an example. In Webpack, if we want to compile Less code into CSS code, we need to use a less-loader when packaging. However, to properly compile Less code into CSS code, you also need to use style-loader and CSS-loader.

First install the three loaders:

npm install style-loader css-loader less-loader --save-dev

Then modify the webpack.config.js configuration file:

module:{
        rules:[
            {
                test:/.less$/,
                use:['style-loader','css-loader', 'less-loader']
            }
        ]
    },

Then import a.less file into the entry file index.js, for example:

import "./xkd.less"

Finally, execute the webpack command to package the xkd.less file and successfully compile it into CSS code.

However, we will find a problem, after each modification of Less, if you want to see the effect in the webpage, you have to re-execute the Webpack packaging, so how to solve this problem. This is where the hot update function comes in. With hot update, the interface updates automatically after each code change without the need to execute the webpack command.

Example:

The contents of the webpack.config.js configuration file are as follows:

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: { entry:'./index.js', }, output: { path:__dirname + '/dist', filename:'./bundle.js' }, module:{ rules:[ { test:/.less$/, use:['style-loader','css-loader', 'less-loader'] } ] }, mode: 'production', plugins: [new HtmlWebpackPlugin({// HTML template: './index.html'}),], devServer:{// Configure the server port number port:8090, // turn on the hot update switch: ContentBase :path.resolve(__dirname,'dist'), // The IP address of the server, Compress :true;} compress:true;}

Configure the NPM script command in package.json:

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --mode development"
}

Then executing NPM Run Build will package the code, which will be compressed into a single line. Executing the NPM run dev command will start a local service, and if you go to http://localhost:8090/, you can see our page. In this way, when we modify Less code, the browser page will automatically update after saving.