Webpack Study notes Eight

Webpack automatically refreshes the browser

Webpack Development Server, is a Webpack official provide an auxiliary development tool, it can automatically monitor the files under the project, once there are modifications to save the operation, it will automatically carry out the packaging command, our code is repackaged, and need to also refresh the browser.

First we install Webpack-dev-server

in the CMD installed in execute NPM intall webpack-dev-server-g

Execute install dependent command in Project directory: NPM install--save-dev Webpack-dev-server

where Webpack-dev-server has several parameters

Contetnbase default Webpack-dev-server provides a local server for the root folder, and if you want to provide a local server for files in another directory, you should set the directory in which it resides (this example is set to the "public" directory)

Port sets the default listening port, if omitted, defaults to 8080

Inline is set to true to automatically refresh the page when the source file changes

Colors set to True to make the terminal output file a color

Historyapifallback is very swimming when developing a single page application, it relies on the HTML5 history API, and if set to true, all jumps will point to index.html

Hot:true Allow hot loading

Configuration items:

devserver:{

Contentbase: './public ',//directory where the local server loads the page

Colors:true,

Inline:true,//Set real-time refresh

}

run npm start again.

How do I run this feature?

The webpack-dev-server has two boot modes:

IFrame: Changes in this mode will be automatically packaged, but will not refresh the browser

Inline: The modified code in this mode is automatically packaged and will refresh the browser

Obviously, we need to refresh the browser

on the command line, enter:webpack-dev-server--inline

It is important to note that now open index.html with a browser requires localhost:8080 or 127.0.0.1:8080, you can specify the listening port in the configuration item.

Here is a trouble, open the browser if there is a pop-up window, you must first click OK after the refresh, can there be a only display has been modified, such as we only modify the color, do not want to click the Pop-up window can be seen has been modified.

just add hot:true to the parameters ,

Since you have modified the configuration item, you need NPM start again,

then execute webpack-dev-server--inline--hot Enter

Browser opens localhost:8080

modifying The CSS file will be automatically modified, and the part without modifying the popup will not be triggered.

to this webpack study notes end.

----------------------

if The following issues occur after executing webpack-dev-server--inline

Webpack-dev-server:command not found

show no command found, there are two workarounds, one is probably not installed all, then use cnpm, if you use CNPM or this, the global installation, such as CNPM install Webpack-dev-server-g

should be able to solve. And then execute webpack-dev-server--inline--hot or something.

If not, you can refer to http://www.jianshu.com/p/397df5dfd09c .

Webpack Study notes Eight