Webpack---less+ hot update use

Recently tried to use less to write the interface, Webpack to package, and then found that each time the change less need to re-execute Webpack packaging, so think of the Webpack hot update this feature.

First, use less

Less is a CSS preprocessing language that expands the CSS, adds variables, mixin, and so on. The less service is required to use less, Less-loader is used for packaging, and the need to parse less correctly into CSS certainly requires style-loader and Css-loader. Loader is one of the important functions of webpack, and by using different loader,webpack you can use external scripts or tools to work with files of different format types, such as through the ". Less" file at Less-loader.

Install First:

NPM Install less--save-dev

NPM Install Style-loader css-loader less-loader--save-dev

Webpack.config.js configuration:

    module: {        rules: [{            /\.less$/, use            : [' Style-loader ', ' css-loader ', ' Less-loader ' ]        }]    }

Then load the. Less file into the portal file, such as import in the portal file. /less/tophead.less '; so you can execute webpack to package the. less file.

Second, Webpack-dev-server hot update

With hot updates, the interface is automatically updated when the code is saved without manually executing the Webpack Package command.

To perform the webpack-dev-server is to download the NPM install Webpack-dev-server–save-dev first. Once downloaded, you need to configure Devserver in Webpack.config.js.

   devserver:{        // set BASIC directory Structure        contentBase:path.resolve (__dirname, ' Dist '),         // IP address of the server, you can use IP or localhost        Host: ' localhost ',        // server compression turned on        compress:true,         // Config service port number        port:8090    }

• Contentbase: Configures the server basic run path to locate the program packaging address. What is the export directory that your program is packaged in, and what do you replace "dist" with?
• Host: The service run address, where the native ip,localhost is used.
• Compress: Server-side compression selection, generally set to on.
• Port: The service runs ports, it is recommended not to use 80, it is easy to occupy, here used 8090.

Finally, define the command in the scripts in Packege.json.

"Scripts": {    "server": "Webpack-dev-server" }

You can then execute NPM server to start the Hot update service. When you modify the code, you do not need to manually webpack the package, just save the modified file. (Note: You need to manually refresh the HTML in the browser)

Webpack---less+ hot update use