The use of the webpack-dev-server of Webpack

The purpose of this article is to experience the cool effects of automatic pop-up browser using the hot update and build of the Webpack server.

1. Installation of Webpack and Webpack-dev-server

Global installation Webpack, using the command NPM install Webpack-g
Global installation Webpack-dev-server, using the command NPM install Webpack-dev-server-g

2. Project file directory structure

The directory structure of the example is as follows:

The purpose of the Hello.js file is to export a text with the following code:

The purpose of the Index.js file is to reference the text and print it to the page. The code is as follows:

Finally, in the page to refer to the packaged bundle.js, the page code is as follows:

3. webpack.config.js file Configuration

After the code is written, configure the following webpack, the configuration file is as follows:

From the configuration, the portal file is Index.js, and a bundle.js is generated after packaging. When booting through Webpack-dev-server, the server listens on port 3000 and automatically opens the browser.

4. Results of project operation

After writing the code and configuration, we run the Webpack-dev-server--hot command and the result is the cup. Pao: Cannot find module ' Webpack '

Baidu, the discovery is the environment variable configuration problem. Create a new system environment variable Node_path with a value of: C:\Users\Administrator\AppData\Roaming\npm\node_modules

You can check if the value of the environment variable is correct, enter the address in the address bar of the computer C:\Users\Administrator\AppData\Roaming\npm\node_modules

Enter the directory after hitting enter:

In this directory we see the global installation of Webpack and Webpack-dev-server, which proves our path is configured correctly.

Run command Webpack-dev-server--hot

The following information can be seen in the browser console, which means that the hot update starts successfully and we do not need to refresh the page after modifying the code.

5. Precautions

Note the place:
1, there is information that use Webpack-dev-server Direct start, in this case to use the hot update, the Webpack.config.js file must be introduced in the plug-in Hotmodulereplacementplugin.
The Webpack official website has a description of this, as follows:

2, when using Webpack-dev-server server startup, packaging the generated files in memory, and using the Webpack command package generated bundle.js default is in the Dist directory, the page reference when the path is different.

The use of the webpack-dev-server of Webpack