webpack-dev-server 使用总结
在前端工程化的年代，相信webpack和webpack-dev-server现如今大部分人都在使用吧，现列举一些常用的webpack-dev-server的属性，方便提高开发效率
- contentBase 服务启动后伺候的静态文件，通俗点就是index.html在哪找，它并不会影响output中的路径配置
- hot 热替选项
- quiet 控制台是否输出信息
- noInfo 过滤很多无关内容
- stats 一个对象，本人只在里面用过colors这个属性，控制台信息是否为彩色
- historyApiFallback 支持像react-router或vue-router的模式为browserHistory时，路由的跳转问题
- publicPath 重要，静态资源伺候地址，就是获取js/css/image等静态资源的路径地址
- proxy 挺好用的，下面会重点讲，方便调试，在没有上node服务前后端分离的情况下，也告别了本地启后台服务的困境（吐槽：以前每天早上来更新代码后，跑一遍后台服务和更新数据库，基本一个上午就过去了，然后可以吃午饭了，哈哈哈，PS.其实这样还是挺爽的）
本人暂且只用过这几个属性，望大家指正和补充 其他属性与配置请参照官方文档
这里主要讲下proxy
webpack-dev-server使用的是http-proxy-middleware，因此里面所有配置都可以参考http-proxy-middleware的文档
proxy: {
'/apis': {
target: '', //要代理到的地址
secure: false, //若地址为https，需要设置为false
onProxyReq: function(proxyReq, req, res) { //提前设置一些代理的头部，如token信息等
},
//...其他配置请自行查阅文档http-proxy-middleware文档
}
}
本人实际项目中线上环境需要登录获取一个token标识，判断用户登录是否过期，之前是每次自行登录一遍线上地址，然后把返回的token拷贝下来，在onProxyReq函数中设置进去，若过期后又要重复操作一遍。
但既然讲究前端工程化，要的就是迅速开发，使开发人员不用受这些繁琐配置的烦劳，不然太影响心情和效率了
其实webpack-dev-server本身就是一个express，当proxy直接在配置中无法满足某些需求的时候，可以使用http-proxy-middleware中间件，下面列出实际项目中的代理的部分代码，还有用到request
var proxy = require('http-proxy-middleware');
var request = require('request');
var server = new WebpackDevServer(webpack(config), option);
var proxyOptions = {
target: '', //要代理到的地址
secure: false,
onProxyReq: function(proxyReq, req, res) {
//设置代理的响应头
}
}
server.use('/apis', function (req, res, next) {
//此处利用request模拟登录拿到返回的token信息，设置到cookie里，下次就可以直接取出来了
//...省略一些判断逻辑代码，判断是否需要模拟登录拿token信息
next() //交给下一个中间件
})
server.use('/apis', proxy('/apis', proxyOptions)); //调用http-proxy-middleware
谢谢，这只是本人项目中遇到的问题和解决的办法，望相互学习，各位大神多多指教