Webpack implements automatic refresh for hot loading, and webpack automatically refresh

Webpack implements automatic refresh for hot loading, and webpack automatically refresh

This article describes how to enable automatic refresh for hot loading using webpack. The details are as follows:

1. webpack-dev-server

A lightweight service

Function: the modified Code is displayed on the browser in a timely manner.

Step 1: Install

npm install webpack-dev-server -g 

 

Step 2: Write to dependency

npm install webpack-dev-server --save-dev

Step 3: Modify the webpack configuration file

Module. exports = {entry :". /js/index. js ", output: {path:"/", // note that the change here must be the root directory. The specified directory is invalid because webpack will generate the following file name under the root directory in the memory. Filename: "bundle. js "}, module: {loaders: [{test :/\. css $/, loader: 'style-loader '}, {test :/\. css $/, loader: 'css-loader '}]}, resolve: {extensions :['. vue ','. js ',". css ", 'jsx '] // automatically complete the identification suffix }}

Note: If you want to specify the output directory, you need to learn how to use the Content Base command.

Step 4: Modify index.html

<script type="text/javascript" src="bundle.js"></script>

Step 5: run the following command to enable automatic refresh.

webpack-dev-server --hot --inline  

Note:

The default port number of webpack-dev-server is 8080.

Step 6:

Access http: // localhost: 8080/index.html and then modify the css to immediately see the response on the webpage.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.