Detailed explanation of the simple use of webpack-dev-server

Detailed explanation of the simple use of webpack-dev-server_javascript skills

不言

Release： 2018-04-03 09:36:42

Original

1169 people have browsed it

This article mainly introduces the simple use of webpack-dev-server in detail. Now I will share it with you and give you a reference. Let’s follow the editor to take a look

webpack-dev-server

webpack-dev-server is a small Node.js Express server. Use webpack-dev-middleware to serve webpack packages. In addition, it also has a micro runtime that connects to the server through 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:"bundle.js"
}
}

Copy after login

Here you put your source files in the app folder and package them into the build folder through webpack bundle.js.

Note: webpack-dev-server is an independent NPM package, you can install it through npm install webpack-dev-server.

Basic Directory

webpack-dev-server defaults to the current directory as the base directory unless you specify it.

webpack-dev-server --content-base build/

Copy after login

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

Copy after login

Auto-refresh

webpack-dev-server supports two modes to automatically refresh the page.

iframe mode ( The page is placed in an iframe and reloaded when changes occur)
inline mode (add the client entry of webpack-dev-sever to the bundle)

Both modes support Hot Module Replacement. The advantage of hot module replacement is that only the updated part is replaced instead of page reloading.

iframe mode
No additional configuration is required to use this mode, you only need to access it in the following URL format

http://«host»:«port»/webpack-dev-server/«path»

For example: http://localhost:8080/webpack-dev-server/index.html.

inline mode

The URL we access does not need to change in inline mode. There are two situations when enabling this mode:

1 When starting webpack-dev-server from the command line, two things need to be done:

Add the --inline command to the command line
Add devServer:{inline:true} to webpack.config.js

2 When starting webpack-dev-server with Node.js API, we also need to do two things:

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

 var config = require("./webpack.config.js");
 var webpack = require(&#39;webpack&#39;);
 var WebpackDevServer = require(&#39;webpack-dev-server&#39;);

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

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:&#39;build/&#39;,
 publicPath: "/assets/"
});
server.listen(8080);

Copy after login

Just run the above code in Node.

Note: The devSever configuration item in the webpack configuration is only valid in the command line mode.

(Hot Module Replacement) Hot module replacement

Run inline mode in the command line and enable hot module replacement

You only need to add more --hot instructions here and it will be OK. As shown below.

webpack-dev-server --content-base build --inline --hot

Copy after login

Note: In command line mode, in webpack.config.js Be sure to configure output.publicPath to specify the access location of the compiled package (bundle).

Run inline mode in Nodejs API and enable hot module replacement

What you need to do here The following three points:

Add in the entry option of webpack.config.js: webpack/hot/dev-server
in webpack. Add to the plugins option of config.js: new webpack.HotModuleReplacementPlugin()
Add to the configuration of webpack-dev-server: hot:true

Configuration options in webpack-dev-server

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",
 // Can also be an array, or: contentBase: "http://localhost/",

 hot: true,
 // Enable special support for Hot Module Replacement
 // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
 // Use "webpack/hot/dev-server" as additional module in your entry point
 // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

 // Set this as true if you want to access dev server from arbitrary url.
 // This is handy if you are using a html5 router.
 historyApiFallback: false,

 // Set this if you want to enable gzip compression for assets
 compress: true,

 // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
 // Use "**" to proxy all paths to the specified server.
 // This is useful if you want to get rid of &#39;http://localhost:8080/&#39; in script[src],
 // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
 proxy: {
 "**": "http://localhost:9090"
 },

 setup: function(app) {
 // Here you can access the Express app object and add your own custom middleware to it.
 // For example, to define custom handlers for some paths:
 // app.get(&#39;/some/path&#39;, function(req, res) {
 // res.json({ custom: &#39;response&#39; });
 // });
 },

 // 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",
 watchOptions: {
 aggregateTimeout: 300,
 poll: 1000
 },
 // It&#39;s a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

Copy after login

Reference: http://webpack.github.io/docs/webpack- dev-server.html

Related recommendations:

How to set remote mode for webpack-dev-server

Detailed explanation of webpack-dev-server using http-proxy to solve cross-domain problems

The above is the detailed content of Detailed explanation of the simple use of webpack-dev-server_javascript skills. For more information, please follow other related articles on the PHP Chinese website!