webpack-dev-server 可通過(guò)命令行方式和 NodeJS 方式啟動(dòng)；但我覺(jué)得兩種啟動(dòng)方式的差異蠻大的，容易對(duì)新人造成誤解，可以對(duì)這兩種啟動(dòng)方式分開(kāi)理解。
一、命令行啟動(dòng)
npm-run webpack-dev-server --content-base build --port 9999 --inline --hot
- 對(duì) content-base 的理解：content-base 指的是 server 服務(wù)的目錄，即只有該目錄下的內(nèi)容才是可訪問(wèn)的（還有 publicPath 哈），但是 content-base 目錄發(fā)生的修改不會(huì)觸發(fā)熱加載。能觸發(fā)熱加載的只有 webpack 關(guān)注的目錄。對(duì) content-base 目錄進(jìn)行修改后重新刷新頁(yè)面即可。
- 命令行啟動(dòng) webpack-dev-server 時(shí)，webpack-dev-server 會(huì)根據(jù) webpack.config.js 的內(nèi)容作出相應(yīng)的動(dòng)作。比如：設(shè)置 webpack.config.js 字段
devServer: { inline: true }，則相當(dāng)于通過(guò)命令行--inline參數(shù)啟動(dòng)（--inline 熱加載-刷新頁(yè)面）。但是，同樣的配置文件通過(guò) NodeJS 直接啟動(dòng)時(shí)卻是不行的。另一個(gè)容易困惑的點(diǎn)就是：在配置文件中設(shè)置了output.publicPath，通過(guò)命令行啟動(dòng)時(shí)，完美運(yùn)行，通過(guò) NodeJS 啟動(dòng)時(shí)就報(bào)錯(cuò)呢，找不到文件？其實(shí)原因就是通過(guò) NodeJS 啟動(dòng)時(shí)，new WebpackDevServer產(chǎn)生的 server 是不知道 webpack.config.js 的內(nèi)容，我們必須自己去配置它，所以var server = new WebpackDevServer(compiler, { publicPath: '/assets/' });就可以了。
二、NodeJS 啟動(dòng)
- 解析 NodeJS 啟動(dòng) inline mode 的兩種方式。
第一種方式：
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
第二種方式：
var config = require("./webpack.config.js");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
// 然后在 html 文件中添加
<script src="http://localhost:8080/webpack-dev-server.js"></script>
// http://localhost:8080 可以刪掉不要
分析：在 server.listen() 執(zhí)行后 server 會(huì)生成 /webpack-dev-server.js 文件，該文件就是 webpack-dev-server/client。但是為什么第一種方式需要加上參數(shù) ?http://localhost:8080/ 呢？因?yàn)?webpack 打包 config 必須指明，且 config 是訪問(wèn)不到 server.port 的；而 server.listen 后 server 生成的 webpack-dev-server.js 它已經(jīng)知道端口號(hào)了。
三、重點(diǎn)理解
- publicPath: 會(huì)把本該生成在 webpack 配置文件的 outputPath.path 下的內(nèi)容全部生成到 publichPath 內(nèi)存路徑中。通過(guò) NodeJS 啟動(dòng)時(shí)需重新配置，且可以不與配置文件的 output.publicPath 字段相同。命令行啟動(dòng)時(shí)若不設(shè)置，則會(huì)默認(rèn) server.publicPath = output.publicPath。
- 為什么用 webpack-dev-server 啟動(dòng)后，改變?cè)创a，控制臺(tái)顯示重新編譯了，但 output.path 下對(duì)應(yīng)的 bundle 卻沒(méi)有改變？原因是 webpack-dev-server 啟動(dòng)后默認(rèn)只是把 webpack 重新編譯的內(nèi)容輸出到 server.publicPath 內(nèi)存去了。如果需要改變 bundle 文件內(nèi)容，需要再通過(guò) NodeJS 啟動(dòng) webpack。
