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

谢谢，这只是本人项目中遇到的问题和解决的办法，望相互学习，各位大神多多指教