The Webpack-dev-server of Webpack

Watch

First introduce the Watch option, refer to here. The ability to update the Bundle.js file automatically after the related source file is changed.

The watch function can be turned on by adding watch:true or performing webpack-w in the configuration file;

The test found that all the JS, CSS and other modules related to (one or more) bundle.js changed, and the bundle.js files on the hard disk were automatically packaged and updated.

Webpack-dev-server

Webpack-dev-server By default, the above monitoring function is turned on. But there are differences between the two monitoring effects:

Webpack-dev-server self-contained monitoring auto-packaging feature, the newly packaged file exists in memory and has no effect on the bundle.js on the hard disk. The memory path of the new file is related to the Publicpath in the configuration file, as follows:

Http://localhost:8080/{publicpath}/bundle.js

Manually performing webpack-w to start the watch effect modifies the Bundle.js file on the hard disk

If Publicpath is configured in the configuration file:

    output: {        + "/dist",        "Bundle.js",        "/p/"    },

The Webpack-dev-server monitoring feature only updates the in-memory file, as the above is http://localhost:8080/p/bundle.js (the page does not refresh automatically), and does not update the Bundle.js file on the hard disk . But this http://localhost:8080/webpack-dev-server/dist/bundle.js file will also be updated, and will automatically refresh

Auto Refresh

Follow the prompts for the document. There are two ways to refresh automatically:

iframe mode : Use this mode does not need any configuration, but need to change the page access path, such as to access the root directory of the first page, the source link is http://localhost:8080/index.html need to switch to http:// Localhost:8080/webpack-dev-server/index.html. When you access this connection, look at the DOM structure of the page and discover that the page is embedded in an iframe:

This page refreshes automatically when the associated module file is modified.

Inline mode: There are two ways to use this mode, node and HTML, respectively. The access page in the inline mode does not need to change the access path as in the IFRAME mode, only the source path is required in the inline mode.

HTML: Add the following script to the page that needs to be refreshed automatically, without needing to add the--inline parameter or configure add Devserver as the document says: {inline: true}

<src= "Http://localhost:8080/webpack-dev-server.js"></  Script>

Understanding is that when Webpack-dev-server's own watch detects changes, the above JS will make the browser automatically refresh

Node mode:

The actual understanding here is that instead of running the Webpack-dev-server command directly, you start the Webpack-dev-server with node. The node code is as follows:

var config = require ("./webpack.config.js"); var webpack = require ("Webpack"); var Webpackdevserver = require ("Webpack-dev-server"); Config.entry.unshift ("webpack-dev-server/client?http:/ /localhost:8080/"); var compiler = webpack (config); var New webpackdevserver (compiler, {}); Server.listen (8080);

Light running this code is no way to make the browser automatically refresh, because this effect is only run webpack-dev-server, but also need to cooperate with the above-mentioned HTML method to automatically refresh the browser.

Summarize the inline mode, directly or through node to start Webpack-dev-server indirectly to detect file changes, automatic packaging, and then add an extra JS HTML to make the browser automatically refresh.

Review one key point: Webpack-dev-server detects that changes are automatically packaged, the newly packaged files actually exist in memory, and the bundle.js on the hard disk is still old. So even if the browser automatically refresh, read the file on the hard disk, the page refreshed, or the same as the page before the refresh.

There are two solutions:

1. Make the page read the in-memory file. Modify the Bundle.js path in the page to a memory path (mentioned above)

2. Update the files on the hard drive. That opens the Webpack-dev-server and starts webpack-w. The former function when the browser automatically refresh, the role of the latter is to update the files on the hard disk.

The Webpack-dev-server of Webpack