## 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
