webpack-dev-server简记

webpack -v 3.4.1

npm -v 3.10.10

///

webpack的webpack-dev-server可以在本地构建nodejs的express服务器进行本地测试，可以在改动代码后自行刷新页面。昨晚试了下但总是不成功，浏览器打开localhost只显示cannot get xxx。翻了好多帖子和github的issues，英明神武的我竟然花了整整一个晚上才弄明白，羞耻。
1.本地安装了webpack后，安装webpack-dev-server，建立好项目文件树
2.在package.json中配置script项命令：
“build”: “webpack –config webpack.config.js –progress –display-reasons –display-error-details –display-modules –color “,
“start”:”webpack-dev-server –open”
3.在config.js输出配置对象中设置devServer属性：
{

    contentBase:__dirname， //浏览器cwd
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

4.运行webpack
npm run bulid
npm run start

问题一：Cannot get xxx
为了这个问题翻了好多帖子浪费很多时间，主要是国内的很多webpack-dev-server教程都前篇一律，没有提到这个问题，甚至有的连contentBase 参数都没列出来，更没有给出solution；后来去github参考别人的代码，翻文档案例，最后终于弄清楚npm run start后，页面打开的url是以devServer中的contentBase作为当前查询目录，只要文档不在contentBase所指定的目录中，就只会显示cannot get;所以只要文档放在该目录下就能正常工作了。
问题二：
页面webpack-dev-server命令后，没有展示文档，却展示了一个目录视图
这是webpack-dev-server擅自加的，contentBase参数设置不对的话，会展示一个以该参数指定目录作为根目录的路由窗口，类似文件树，contentBase设置到index.html就好了。另外，如果output设置了publicPath，index中js的src也要以publicPath作为路径，不必使用绝对路径。

补充5.由于版本原因，一些参数的有无和设置不同，建议大家在确定自己webpack版本后直接查阅官方文档就好啦。

我的webpack是3.4.1，webpack-dev-server参考文档：https://webpack.js.org/guides/development/#using-webpack-dev-server.

另外推荐简书上一篇很赞的webpack教程：http://www.jianshu.com/p/42e11515c10f