怎么解决webpack-dev-server代理常切换问题

　　介绍

这篇文章将为大家详细讲解有关怎么解决webpack-dev-server代理常切换问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>背景

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

<强>现有问题

<李>

需要手动更改代理配置,比较麻烦还容易写错

<李>

改变后的配置文件会被git检测到

<李>

不小心将本地修改的配置推到远程仓库,对其他人造成困扰

<强>需求

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

因为我本地用了一大口,启动前端开发环境到命令是<代码>杯当地> npm xx> <李>

当杯当地的时候,代理为dev.xxx.cn

<李>

当杯当地- t码头工人的时候,代理为docker.xxx.cn

<李>

当杯当地- t 192.168.1.1的时候,代理为192.168.1.1

<>强解决方案

创建webpack.local。js、代理配置如下

代理:,{ 　　,& # 39;/api/* * & # 39;:, { 　　,,目标:& # 39;http://{目标| dev} .xxx.cn& # 39;, 　　changeOrigin才能:,真的, 　　}, 　　}

在我们运行<代码>杯当地> - t> 杯当地- t码头工人>

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

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

<强>实现细节

上面的配置中{目标| dev} |后面的开发是执行杯当地时的默认选项

const  {, t },=gulputil.env 　　let  config =, fs.readFileSync (_path.join (__dirname, & # 39;/webpack.loc.js& # 39;)) .toString () 　　 　　if  (/\ d {1,3} (\ \ d {1,3}) {3}/test (t)), {=,,config  config.replace(/\ \{目标[^}]+ \ \}[^ & # 39;]*/g, t) 　　},else  if  (typeof  t ===, & # 39;字符串# 39;,,,,t.length 祝辞,0),{=,,config  config.replace(/\ \{目标[^}]+ \ \}/g, t) 　　},{else =,,config  config.replace(/\ \{目标\ \ | ([^}]+)\ \}/g, & # 39; & # 39; 1美元) 　　} 　　fs.writeFileSync (_path.join (__dirname, & # 39;/webpack.loc.target.js& # 39;),,配置)

第一个如果判断内容为- t后的参数是否为ip,如果是,替换& # 39;http://{目标| dev} .xxx.cn& # 39;为http://192.168.1.1

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

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

关于“怎么解决webpack-dev-server代理常切换问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

怎么解决webpack-dev-server代理常切换问题