Webpack-dev-server Configuration Guide webpack3.0

Recently studying Webpack, I heard that webpack can build a small server (using VUE-CLI friends should have seen it), so eager to try. However, in the actual operation found that using Webpack to build the server still have a lot of pits, on the one hand because of their unfamiliar documents, do not understand the webpack-dev-server mode of operation; On the other hand, after flipping through a lot of blogs and articles, It is found that many configurations are not actually running (it could be the version or the reason for my own configuration). So I'm going to use webpack3.0 to run up the dev-server to show you, by the way, some configuration and principles for everyone to speak clearly, so that the provincial detour.

　　

Here I will default everyone has installed Webpack and their own need to use the loader and plugins, because Webpack-dev-server is a standalone NPM package, so we need to install it under NPM:

NPM Install Webpack-dev-server--save-dev

Then we can configure it in Webpack.config.js:

Const PATH = require ("path");
Module.exports = {     entyr:{  .... Set the portal file     },     output:{  .... Set export File     },     module:{  .... Configure loader, note using rules instead of loaders     },     plugins:[...           .  Note is the array     ],     devserver:{           //We are here to configure Webpack-dev-server     }                }

The configuration object properties commonly used in Devserver are as follows:

1. Contentbase: "./"//local server in which directory to build the page, generally we can be in the current directory;

2. Historyapifallback:true//When we build the spa application is very useful, it uses the HTML5 history Api, any jump or 404 response can point to the index.html page;

3. Inline:true//To support Dev-server Auto-refresh configuration, Webpack has two modes to support automatic refresh, one is the IFRAME mode, one is the inline mode, and the IFRAME mode is not required to be configured in Devserver. Just use a specific URL format to access, but we generally still commonly used inline mode, after the Devserver is set to true, when we start webpack-dev-server still need to configure the inline to take effect, We'll talk about this later.

4. Hot:true//Start Webpack Heat module replacement features, here is also the most pits, many blogs will be hot set true, we would also set to true, then look;

5. Port: Port number (default 8080)//This is not necessary for me to say more;

In fact, the general configuration is also the case, in order to facilitate, we packjson in the webpack-dev-server of the start of the setting:

"Scripts": {    ...    ......    " Start ":" Webpack-dev-server--inline "  },

Don't forget to set up inline:true after setting it up in Devserver!

At this time we pack and then run the server should be found that the Index.html page has been shown, after the packaging of the JS file appears on the SRC, but did not show that the console will be opened to find the following error:

Console display: Hot Module replacement is disabled;

Strange? Didn't we set hot to true in Devserver? In fact, although I do not know why, but for the time being hot this property has no use, using the thermal module we need to use a call webpack. Hotmodulereplacementplugin plug-in. So our webpack.config.js need to add these:

Const PATH = require ("path"), const Webpack = Requier ("Webpack"), Module.exports = {     entyr:{           ...  . Set the portal file     },     output:{  .... Set export File     },     module:{  .... Configure loader, note using rules instead of loaders     },     plugins:[          new Webpack. Hotmodulereplacementplugin ()  .... Note is the array     ],     devserver:{          contentbase: "./",       historyapifallback:true,      inline:true,      Hot:true     }                }

Then we ran NPM run start on bash and found that the server was built!

In addition, it is worth noting that The Bundle.js file used by Webpack-dev-server is not bundle.js generated by output packaging in Webpack.config.js, but is generated using Webpack-dev-server's own packaging, which does not exist with output or its In his path, but in memory, in fact webpack-dev-server used by the bundle.js we can not see!

Webpack-dev-server Configuration Guide webpack3.0