Webpack-dev-server automatically updates the page,

Webpack-dev-server automatically updates the page,

I watched webpack in the past two days. Today I got stuck on webpack-dev-server. After a long afternoon, I was unable to run normally. Every time the server was prompted to start normally, however, when you enter localhose: 8080/admin in the browser, the prompt "Get/..." is displayed /..., the page cannot be opened. Finally, find a post and find that the code for starting the server is incorrect.

Install webpack components first

cnpm i webpack-dev-server --save-devcnpm i webpack --save-dev

The Code is as follows:

1. The project structure is as follows:

 

2. webpack. config. js configuration file

Because I have defined two js files, we need to define two names at the entry side and package them into two bundle. js files .....

Because the dynamically generated files are stored in the dist folder, the following publicPath: "/dist/" is used to monitor file changes in the folder, as long as the file content changes (in fact, it is to manually update the index in the admin and customer folders. js, which automatically updates the corresponding bundle. js), the page is automatically updated.

3. package. json Configuration

Note that "server": "webpack-dev-server -- inline -- content-base" is the correct code for starting the server,

I used the following three methods before (this method should be of the old version, but it does not seem to be supported in version 2.0 or later, and I did not check this method ),

"server":"webpack-dev-server --inline --hot","server":"webpack-dev-server --inline","server":"webpack-dev-server"

4. Run the command

First, enter "npm start" to generate two bundle. js

Enter "npm run server" or "webpack-dev-server -- inline -- content-base"

Enter localhose: 8080/admin or localhose: 8080/customer in the browser to open the corresponding page.

5. Modify the js Code of the corresponding page. The page will be automatically synchronized and updated immediately.

The above webpack-dev-server automatic page update method is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.