如何解决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每次Title显示不同的名言
Sep 25 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
在PHP中使用模板的方法
2008/05/24 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
javascript中的面向对象
2017/03/30 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
关于护士节的演讲稿
2014/05/26 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
经理任命书模板
2014/06/06 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书