Detailed explanation of the use of Webpack-dev-server

Webpack-dev-server

Webpack-dev-server is a small node.js Express server that uses Webpack-dev-middleware to serve the Webpack package, in addition to this alien, It also has a miniature runtime that connects to the server via Sock.js.

Let's take a look at the following configuration file (Webpack.config.js)

var path = require ("path");
Module.exports = {
    entry:{
    app:["./app/main.js"]
    },
    output:{path:path.resolve
    (__dirname, " Build "),
    Publicpath:"/assets/",
    filename:" Bundles.js "
}
}

Here you put your source files under the app folder and package them to the Bundle.js in the Build folder by Webpack.

Note: Webpack-dev-server is a stand-alone NPM package that you can install via NPM install Webpack-dev-server. Basic Directory

Webpack-dev-server defaults to the current directory as the base directory unless you make it.

Webpack-dev-server--content-base build/

The above command is executed on the command line, which takes the build directory as the root. One thing to note is that the webpack-dev-server generated packages are not in your real directory, but in memory.

We create a new index.html file in the base directory, and then enter http://localhost:8080 access in the browser.

<! DOCTYPE html>
 
Auto Refresh 
Webpack-dev-server supports two modes to automatically refresh the page.

IFrame mode (page in IFrame, overloaded when change occurs)

Inline mode (add webpack-dev-sever client Portal to package (bundle))

Both modes support thermal module substitution (hot modules replacement). The benefit of the heat module substitution is that it replaces only the updated part, not the page overload. iframe Mode

Using this mode does not require additional configuration, just access it in the following URL format

Http://«host»:«port»/webpack-dev-server/«path»
 
For example: Http://localhost:8080/webpack ... Inline Mode

The URL we visit in inline mode does not change, enabling this mode is divided into two situations:

1 when starting webpack-dev-server at the command line, you need to do two points:

To add the--inline command at the command line

Add Devserver:{inline:true} in Webpack.config.js

2 When starting Webpack-dev-server with the Node.js API, we also need to do two points:

Because there is no inline option in the Webpack-dev-server configuration, we need to add webpack-dev-server/client?http://«path»:«port»/to the entry entry point of the Webpack configuration.

Add <script src= "Http://localhost:8080/webpack-dev-server.js" ></script> to an HTML file

    var config = require ("./webpack.config.js");
    var webpack = require (' Webpack ');
    var webpackdevserver = require (' Webpack-dev-server ');

Config.entry.app.unshift ("webpack-dev-server/client?http://localhost:8080/");

var compiler = Webpack (config);
var server = new Webpackdevserver (compiler, {
    contentbase: ' build/',
    publicpath: "/assets/"
});
Server.listen (8080);
 
Run the above code in node.

Note: The Devsever configuration entry in the Webpack configuration is valid only for the command-line mode. (Hot module Replacement) Thermal modules replacement run inline mode on the command line and enable hot module substitution

It only takes a little more than just a--hot command to be OK.

Webpack-dev-server--content-base Build--inline--hot
 
Note: in command line mode, webpack.config.js must configure Output.publicpath to specify the access location of the compiled package (bundle). run inline mode in the Nodejs API and enable hot module substitution

Here are the following three points to do:

Add in the entry option of Webpack.config.js: Webpack/hot/dev-server

Add the Plugins option in Webpack.config.js: New Webpack. Hotmodulereplacementplugin ()

Adding in Webpack-dev-server configuration: hot:true webpack-dev-server configuration options

var webpackdevserver = require ("Webpack-dev-server");

var webpack = require ("Webpack");
var compiler = Webpack ({//configuration}); var server = new Webpackdevserver (compiler, {//Webpack-dev-server options Contentbase: "/path/to/directory",//C An also is a array, or:contentbase: "http://localhost/", hot:true,//Enable special support for hot Module Replac Ement//Page is no longer updated, but a ' webpackhotupdate ' message ' Send to ' content/use ' Webpack/hot/dev-se RVer "as additional module in your entry point//Note:this does _not_ add the ' hotmodulereplacementplugin ' like the CL 

  I option does.
  Set this as true if you are want to access dev server from arbitrary URL.
  This is handy if you are using a HTML5 router. Historyapifallback:false,//Set this if you are want to enable gzip compression for assets compress:true,//Set th
  Are if you are want Webpack-dev-server to delegate a single path to a arbitrary server. Use "* *" to ProxyAll paths to the specified server. This is useful if you are want to get rid of ' http://localhost:8080/' in script[src],//and has many other use cases (SE
  e https://github.com/webpack/webpack-dev-server/pull/127). Proxy: {"* *": "http://localhost:9090"}, Setup:function (APP) {//Here you can access the Express app Objec
    T and add your own custom middleware to it. For example, to define custom handlers for some paths://App.get ('/some/path ', function (req, res) {//RES.J
    Son ({custom: ' response '});
  // }); },//pass [static options] (http://expressjs.com/en/4x/api.html#express.static) to Inner Express server staticoptions : {},//Webpack-dev-middleware options Quiet:false, Noinfo:false, lazy:true, filename: "Bundle.js", WA
  Tchoptions: {aggregatetimeout:300, poll:1000},//It ' s a required option.
Publicpath: "/assets/", headers: {"X-custom-header": "Yes"}, stats: {colors:true}}); Server.listen (8080, "localhost", function () {}); Server.close ();
 
Reference: Http://webpack.github.io/docs ...

Reprint: https://segmentfault.com/a/1190000006964335