webpack-dev-server 使用总结
发布于 6 年前 作者 soullcm 15052 次浏览 来自 分享

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

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

1 回复

代理在使用mock数据的时候用过,挺好的 使用antd-moblie[cnode]版

回到顶部