如何解决webpack-dev-server代理常切换问题


Posted in Javascript onJanuary 09, 2019

背景

通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到开发服务器,来解决本地跨域问题。假如项目变大,可能需要proxy到不同环境,比如docker,或者后端开发人员的电脑上

现有问题

  • 需要手动更改proxy配置,比较麻烦还容易写错
  • 改变后的config文件会被git检测到
  • 不小心将本地修改的配置push到远程仓库,对其他人造成困扰

需求

假如本地开发服务器是dev.xxx.cn,docker环境是docker.xxx.cn,服务端开发人员ip是192.168.1.1

因为我本地用了gulp,启动前端开发环境到命令是 gulp local (与 npm run xx 的效果差不多),那么我希望

  • 当gulp local的时候,proxy 为 dev.xxx.cn
  • 当gulp local -t docker的时候,proxy 为 docker.xxx.cn
  • 当gulp local -t 192.168.1.1的时候,proxy 为 192.168.1.1

解决方案

创建webpack.local.js,proxy配置如下

proxy: {
 '/api/**': {
  target: 'http://{target|dev}.xxx.cn',
  changeOrigin: true,
 },
}

在我们运行 gulp local 时,读取local.config文件,替换{target|dev}为 -t 后的内容,比如 gulp local -t docker ,替换后变为 'http://docker.xxx.cn'

再将替换后的文件内容输出到一个名为webpack.local.target.js的文件里,然后执行 webpack-dev-server -c webpack.local.target.js

最后修改.gitignore文件,加入webpack.loc.target.js,这样每次生成的文件就不会被误push到远程

实现细节

上面的配置中 {target|dev} |后面的dev是执行 gulp local 时的默认选项

const { t } = gulputil.env
let config = fs.readFileSync(_path.join(__dirname, '/webpack.loc.js')).toString()

if (/\d{1,3}(\.\d{1,3}){3}/.test(t)) {
 config = config.replace(/\\{target[^}]+\\}[^']*/g, t)
} else if (typeof t === 'string' && t.length > 0) {
 config = config.replace(/\\{target[^}]+\\}/g, t)
} else {
 config = config.replace(/\\{target\\|([^}]+)\\}/g, '$1')
}
fs.writeFileSync(_path.join(__dirname, '/webpack.loc.target.js'), config)

第一个if判断内容为-t后的参数是否为ip,如果是,替换 'http://{target|dev}.xxx.cn' 为 http://192.168.1.1

第二个判断是否有参数,如果有,替换为 http://docker.xxx.cn

第三个判断就是直接运行 gulp local 不加 -t 时,替换为 http://dev.xxx.cn

正则不太懂可以看我另一篇文章《正则速记法》

觉得运行开发环境打包慢可以看《webpack性能榨汁机》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
一个因@click.stop引发的bug的解决
Jan 08 #Javascript
You might like
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python动态监控日志内容的示例
2014/02/16 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
电子商务专员岗位职责
2013/12/11 职场文书
实习鉴定范文
2013/12/19 职场文书
区三好学生主要事迹
2014/01/30 职场文书
汽车广告策划方案
2014/05/31 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
复活读书笔记
2015/06/29 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
python中的3种定义类方法
2021/11/27 Python