## webpack-dev-server
簡單來說，webpack-dev-server 就是一個小型的靜態文件服務器，可以使用它，為webpack打包生成的資源文件提供Web服務。
1、安裝`webpack-dev-server`。
`npm install webpack-dev-server --save-dev`
> 同樣的，webpack-dev-server 需要全局安裝，npm install -g webpack-dev-server
2、修改`webpack.dev.config.js`，增加`webpack-dev-server`的配置！
~~~
'use strict'
const path = require('path')
module.exports = {
/*入口*/
entry: path.join(__dirname, 'src/index.js'),
/*輸出到dist文件夾，輸出文件名字為bundle.js*/
output: {
path: path.join(__dirname, './dist'), /*輸出目錄*/
filename: 'bundle.js' /*輸出文件名*/
},
// 新增：
/*靜態文件服務器配置*/
devServer: {
contentBase: path.join(__dirname, './dist')
},
/*include：包含，src文件夾下面的以.js結尾的文件，要使用babel解析*/
/*cacheDirectory是用來緩存編譯結果，下次編譯加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
}
}
~~~
3、現在需要使用`webpack-dev-server`來幫我們做一些事情。
`webpack-dev-server --config webpack.dev.config.js`
現在打開瀏覽器 http://localhost:8080 ，可以看到首頁和Page了。
Q:` --content-base`是什么？
A：URL的根目錄。如果不設定的話，默認指向項目根目錄。
**重要提示：webpack-dev-server編譯后的文件，都存儲在內存中，我們并不能看見的。你可以刪除之前遺留的文件dist/bundle.js，
仍然能正常打開網站！**
4、每次執行`webpack-dev-server --config webpack.dev.config.js`，要打很長的命令，我們修改`package.json`，增加`script->dev`:
~~~
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"work": "webpack --config webpack.dev.config.js",
"dev": "webpack-dev-server --config webpack.dev.config.js"
}
~~~
既然用到了`webpack-dev-server`，我們就來看看[它的其他的配置項](https://doc.webpack-china.org/configuration/dev-server)。
* color（CLI only） `console`中打印彩色日志
* historyApiFallback 任意的404響應都被替代為`index.html`。有什么用呢？你現在運行 `npm run dev`，然后打開瀏覽器，訪問 http://localhost:8080 ，然后點擊Page到鏈接 http://localhost:8080/page ，然后刷新頁面，是不是會出現404了。為什么？`dist`文件夾里面并沒有`page.html`所以會變成404，所以我們需要配置historyApiFallback，讓所有的404都定位到`index.html`。
* host指定一個`host`，默認是`localhost`，如果希望本地服務器外部能訪問的話，比如手機通過IP訪問，就需要指定如下：`host: "0.0.0.0"`。
* hot 啟用`webpack`的模塊熱替換特性。
* port 配置要監聽的端口。默認就是8080端口，通常這個端口容易被占用，所以大多數情況都是要修改的。
* proxy 代理。比如在`localhost: 3000`上有后端接口服務的話，你可以這樣啟用代理：
~~~
proxy: {
"/api": "http://localhost:3000"
}
~~~
* progress（CLI only） 將編譯進度輸出到控制臺。
5、根據這幾個配置，修改下我們的`webpack-dev-server`的配置~
~~~
devServer: {
port: 10086,
contentBase: path.join(__dirname, './dist'),
historyApiFallback: true,
host: '0.0.0.0'
}
~~~
6、CLI ONLY的需要在命令行中配置
`package.json`
~~~
"dev": "webpack-dev-server --config webpack.dev.config.js --color --progress"
~~~
現在我們執行npm run dev 看看效果。
是不是看到打包的時候有百分比進度？
在 http://localhost:8080/page 頁面刷新是不是沒問題了？
用手機通過局域網IP是否可以訪問到網站？
參考地址：
https://segmentfault.com/a/1190000006670084
https://webpack.js.org/guides/development/#using-webpack-dev-server
