webpack-dev-server使用說明

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

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

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

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

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

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

四、

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