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