webpack提供給我們檢查壓縮代碼的功能之外，還提供了1個服務器的插件，這就是webpack-dev-server，利用這個差價我們可以啟動個web服務器並時時更新我們的修改。
下面以1個簡單的例子說明，項目結構：
package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "測試webpack",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot --config webpack.config.js"
},
"author": "zouqin",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
var path = require("path");
module.exports = {
entry:[
'./js/app.js'
],
output: {
path: path.resolve('./', "dist"),
publicPath: "build",
filename: "bundle.js"
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>我是h1標簽</h1>
<script src="build/bundle.js"></script>
</body>
</html>
js/app.js
document.getElementsByTagName('h1')[0].style.background='#0f0';
-------------
以上的目錄文件建好之后，用 npm install 安裝package.json中聲明的依賴。這時候項目根目錄下就會生成node_modules文件夾。
接下來，就啟動webpack-dev-server。命令參見package.json下的 "scripts"項，用:
npm run dev
相當於運行了
webpack-dev-server --inline --hot --config webpack.config.js
還有另外一種方式：在項目根目錄下運行：
node node_modules/.bin/webpack-dev-server
這其實說明了我們的webpack命令是來自node_modules/.bin/webpack-dev-server。我們看github webpack-dev-server官網：
本項目用的在inline模式，沒有嵌在frame中。默認的端口號是8080，所以訪問地址是：http://localhost:8080/index.html
webpack-dev-server是一個小型的Node.js Express服務器【1】。既然這樣，很多配置是可以設置的。啟動端口號可以設置的，下面這個就在8000端口啟動：
webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline
注意：
1）webpack.config.js中的output項，可以這么理解：path是打包的項目路徑，用webpack -p 執行。publicPath是webpack-dev-server的路徑。
2）webpack-dev-server他將打包后的存在內存中，並沒有在工作區生成一個文件。打包文件用，用webpack -p 命令。
3）--hot 是熱加載，也就是說，當我們改動文件后保存，瀏覽器已經自動刷新了我們的修改，不需要按F5，這在我們開發時很方便
4）修改index.html文件，並不會熱加載。熱加載相關的是入口文件，本例中的是js/app.js文件，修改這個文件，會熱加載。
5) 本例沒有用css，用了css，並在入口文件js/app.js中require，修改css。也會熱加載。同理，如果用了HTML的插件，在入口文件中引入，也會熱加載。
6）網上的好多例子，在webpack.config.js這么寫：
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
多了個'webpack/hot/only-dev-server',實踐下來發現去掉完全可以。
參考
【1】https://segmentfault.com/a/1190000006964335