webpack-dev-server使用說明

1、webpack-dev-server默認會以當前目錄為基本目錄,除非你制定它.

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

　　上述命令是在命令行中執行的,它將build目錄作為根目錄.

2、webpack-dev-server生成的包並沒有放在你的真實目錄中,而是放在了內存中.

3、webpack-dev-server支持兩種模式來自動刷新頁面.

iframe模式(頁面放在iframe中,當發生改變時重載)
inline模式(將webpack-dev-sever的客戶端入口添加到包(bundle)中)
兩種模式都支持熱模塊替換(Hot Module Replacement).熱模塊替換的好處是只替換更新的部分,而不是頁面重載.

4、

iframe模式
使用這種模式不需要額外的配置,只需要以下面這種URL格式訪問即可

http://«host»:«port»/webpack-dev-server/«path»
例如:http://localhost:8080/webpack...

inline模式
inline模式下我們訪問的URL不用發生變化,啟用這種模式分兩種情況:

1 當以命令行啟動webpack-dev-server時,需要做兩點：

在命令行中添加--inline命令
在webpack.config.js中添加devServer:{inline:true}
2 當以Node.js API啟動webpack-dev-server時,我們也需要做兩點:

由於webpack-dev-server的配置中無inline選項,我們需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口點中.
將<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中

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);

在Node中運行上面的代碼即可。

注意：webpack配置中的devSever配置項只對在命令行模式有效。

更多參考：https://segmentfault.com/a/1190000006964335