webpack-dev-server 怎么配置启动打包后的页面

万事学习的时候，都会多多少少有一些坑，好多时候其实是理解上的坑，说说我的填坑过程吧，按照教程，我的配置过程如下：

第一步：当然是初始化配置啦：npm init -y

第二步：然后就是填鸭式的安装啦，balabalabala........，当然webpack-dev-server 是主要的啦，以下是我简要的package.json：

第三步：既然我们要用webpack-dev-server，那就了解下它的一些属性吧，它的属性有点多，我这里把常用的属性列下吧，如下：

（1）compress：是否对所有服务启用gzip压缩。

（2）filename：需要编译的文件名。

（3）contentBase：该配置项指定了服务器资源的根目录，如果不配置contentBase的话，那么contentBase默认是当前执行的目录,一般是项目的根目录。

（4）openPage：指定打开浏览器时要导航到的页面。

（5）port：该配置属性指定了开启服务器的端口号。

（6）host：该配置项用于配置 DevServer的服务器监听地址。比如想让局域网的其他设备访问自己的本地服务，则可以在启动DevServer时带上 --host 0.0.0.0.

（7）headers：该配置项可以在HTTP响应中注入一些HTTP响应头。

（8）historyApiFallback：该配置项属性是用来应对返回404页面时定向跳转到特定页面的。一般是应用在 HTML5中History API 的单页应用，比如在访问路由时候，访问不到该路由的时候，会跳转到index.html页面。

（9）inline：webpack-dev-server 有两种模式可以实现自动刷新和模块热替换机制。

（10）open：该属性用于DevServer启动且第一次构建完成时，自动使用我们的系统默认浏览器去打开网页。

（11）overlay：该属性是用来在编译出错的时候，在浏览器页面上显示错误。该属性值默认为false，需要的话，设置该参数为true。

（12）stats：该属性配置是用来在编译的时候再命令行中输出的内容。

（13）proxy：有时候我们使用webpack在本地启动服务器的时候，由于我们使用的访问的域名是 http://localhost:8081 这样的，但是我们服务端的接口是其他的。那么就存在域名或端口号跨域的情况下，但是很幸运的是 devServer有一个叫proxy配置项，可以通过该配置来解决跨域的问题，那是因为 dev-server 使用了 http-proxy-middleware 包.。

OK，这一步我们 把主要的属性列了一下，只是需要对webpack-dev-server有一个初步的了解，具体的每个参数的意义大家可以参考：https://www.cnblogs.com/tugenhua0707/p/9418526.html 这个文章，写的还挺不错的。

第四步：回归到我们主要的问题，怎么配置启动打包后的页面，说的有点俗套，希望各位能够理解，这个问题主要是通过contentBase 和 openPage这两个配置来结局的，再使用前我们一定要深刻理解这两个参数的意义，这里就需要考核大家的理解水平啦，刚开始我的配置是这样的：

死活不行，一直404，如下图：

最后我的配置改成就没问题了：

我想，现在大家应该明白问题所在了，也明白怎么配置啦，是不是有时候直接上代码 比 一张嘴或一大堆文字 balabala  好多啦！！！