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

原文地址:https://www.cnblogs.com/alan2kat/p/7244610.html