上一篇2020年，《深入浅出Webpack》（吴浩林2018/01）学习总结我写了学习webpack的目的和过程，so——所谓一个程序员的价值，往往体现在他写的代码给社会带来的价值上。所以在这篇文章中，我将结合我目前的项目，介绍如何用更少的代码修改来搭建多开发环境和多生产环境。前言业务需求背景：我所在的公司是一家前后端并行开发的小型外包公司。该团队根据项目情况从公司其他部门的员工中抽调。默契度不算太高，连产品经理都是其他公司的。职员。还是前端小白新手的笔者，使用vue-cli2被误撞成了前端负责人（当然工资不会增加，只会增加工时）.9model识别模板，（vue-cli2之前的模板还是使用原生的webpack，现在最新的vue-cli3和vue-cli4使用了vue团队做的插件来安排工作环境。配置有很多不仅要了解webpack，还要学习vue-cli。）需求：新建一个dev环境，用于mock数据模拟，修改构建打包异步请求的地址，创建5个不同的打包地址供不同部门审核甲方，开发环境和生产环境的NODE_ENV值不变，开发生产项目开发完成度接近70%。不适合修改太多业务代码，前端多人开发。新环境应该增加启动命令，而不是使用旧命令来执行新功能。设计1.开发环境设计项目在对接界面的同时进行开发。这是因为很多数据都是甲方作为模型提供的，然后由后端同事处理返回（同时测试也是使用后端测试数据）。个别接口数据后端开发比前端更快，前端使用devServer，然后根据返回的数据进行开发，不用mock模拟。如果后端没有提供接口，启用mock模拟环境npmrundev//运行普通的dev环境，可以用来连接已有的接口npmrundev:mock//运行一个特殊的mock模拟环境2.生产环境设计因为项目经常要打包多个不同的axios.baseUrl地址发给不同的人（公司的项目负责人，甲方的测试，甲方的测试2，甲方的甲方服务地址（所以我其实是乙方的乙方的（乙方一共5处）运行不同的地址，打包到不同的文件夹。npmrunbuild//普通打包，这样其他人接手后不会读取代码npmrunbuild:none//打包地址找当前服务器目录=>'/'npmrunbuild:193//打包为http://193.xxx.xx.xxx:8080/xxx/xxnpmrunbuild:192//打包为http://192.xxx.xx.xxx:8080/xxx/xxnpmrunbuild:113//打包为http://113.xxx.xx.xxx:8080/xxx/xxnpmrunbuild:10//打包为http://10.xxx.xx.xxx:8080/xxx/xx然后把最终的包放到项目及目录为：dist,dist-none,dist-193,dist-192,dist-113,dist-10start1.开发修改根据上一篇文章（2020，《深入浅出Webpack》）学习webpack（吴浩林2018/01)学习总结），webpack可以通过package.json脚本中的命令向node环境传递参数，写法：//package.json{"script":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","dev:mock":"ENV_NUM=0npmrundev",}}这样，如果你运行npmrundev:mock，ENV-NUM的值会被传给process.env，在项目中可以通过process.env.ENV_NUM获取该值，即'0'；但是webpack的npm.script传参方式在不同系统上不兼容，可能会导致系统卡顿。（我用的是mac，同事都用windows，或许给甲方的代码对lunix高手也有用，当然如果是用server打包的话，lunix就更多了）网友介绍使用cross-env插件处理安装npmicross-env--save并修改package.json如下：//package.json{"script":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","dev:mock":"cross-envENV_NUM=0npmrundev",}}在ENV_NUM=0之前添加了一个cross-env。仔细发现了，vue-cli项目中，在设置webpack.config.js的时候，重新修改了代码中process.env的值，所以在npm.script中设置了一个ENV-NUM，但是会后面要用到的配置中的设置被重新赋值，导致在项目代码中找不到。plugins:[newwebpack.DefinePlugin({'process.env':require('../config/dev.env'),//在这里重新分配process.env}),...]所以，在config目录下，修改dev.env.js，注意多加ENV_NUM:'"1"''usestrict'constmerge=require('webpack-merge')constprodEnv=require('./prod.env')module.exports=merge(prodEnv,{NODE_ENV:'"development"',ENV_NUM:'"1"'})同时新建一个文件dev.mock.js，ENV_NUM的值为'"0"''使用strict'constmerge=require('webpack-merge')constprodEnv=require('./prod.env')module.exports=merge(prodEnv,{NODE_ENV:'"development"',ENV_NUM:'"0"'})然后修改build/webpack.dev.conf.js//添加envconstenv=process.env.ENV_NUM==='0'?require('../config/mock.env'):require('../config/dev.env');//plugins改为plugins:[newwebpack.DefinePlugin({'process.env':env}),//其他不变...在axios数组的url处设置为一个，数组第一个元素为mock接口，用于dev:mock。第二个元素是真正的后台接口，用于dev和build示例：axios.request({///mock/user用于模拟url:['/mock/user','/user'],})at同时，在axios的请求拦截处区分传入的url//src/libs/axios.js//请求拦截service.interceptors.request.use(config=>{leturl=getNowUrl(config.url);config.url=url;returnconfig;},error=>{console.log(error);returnPromise.reject(error)});//src/libs/utils.jsexportconstgetNowUrl=(url)=>{letnum;//0使用数据模拟，1不使用数据模拟num=process.env.ENV_NUM;if(Array.isArray(url)){if(url.length===1){num="0";}返回url[num];}else{返回网址；这样，当我们运行npmrundev:mock时，它会请求URL数组中的第一个，而当运行npmrundev或npmrunbuild时，它会请求第二个，当url不是一个数组或数组只有一个元素，可以命中可用地址。2.生产修改根据开发方式，在process.env中多加一个参数，区分项目中的不同地址即可。但是由于构建只改变了打包地址，而且地址很多，如果每个地址都新建一个prod.env.js文件，大量的重复代码会使项目臃肿。于是想到，webpack修改process.env后，再将参数注入到process.env中。按照设计，只需要修改process.env和打包后的输出文件夹，然后在代码中按照process.env中约定的字段不同的值来选择不同的baseUrl。先看一下vue-cli的默认配置：baseUrl地址写在：src/config/index.jsbaseUrl:{dev:'',pro:'http://193.xxx.xx.xxx:8080/',//生产环境测试地址：'',}在axios配置文件中选择//src/libs/axois.jsconstbaseUrl=process.env.NODE_ENV==='development'?config.baseUrl.dev:config.baseUrl.proconstservice=axios.create({baseURL:baseUrl,timeout:10000,})修改开始：在package.json中添加BASE_URL，值为数字形式{"scripts":{..."dev:mock":"cross-envENV_NUM=0npmrundev","build:none":"cross-envBASE_URL=0npmrunbuild","build:193":"cross-envBASE_URL=1npmrunbuild","build:113":"cross-envBASE_URL=2npmrunbuild","build:192":"cross-envBASE_URL=3npmrunbuild","build:10":"cross-envBASE_URL=4npmrunbuild"}}src/config/index.js添加属性prodUrl作为数组baseUrl:{dev:'',pro:'http://193.xxx.xx.xxx:8080/',测试:'',prodUrl:['/','http://193.xxx.xx.xxx:8080/','http://113.xxx.xxx.xxx:8082/xxxx/xxx/','http://192.xxx.xx.xxx:8082/xxxx/xxx/','http://10.xx.xxx.xxx:8082/xxxx/xxx/',]}，修改生产配置webpack//build/webpack.prod.conf.jsconstenv=process.env.NODE_ENV==='测试'?要求（'../config/test.env'）：要求（'../config/prod.env'）;//pathsletassetsRoot='';//添加lethtmlIndex='/index.html';//add//addconsole.log('env',env)if(env.NODE_ENV==='"production"'){//注意，这里有两个引号env.BASE_URL=utils.findBaseUrl();assetsRoot=utils.findPaths();htmlIndex=assetsRoot+htmlIndex;}console.log('env2',env);console.log('assetroot',assetsRoot);console.log('htmlIndex',htmlIndex);...插件：[新的webpack.DefinePlugin({'process.env':env}),..//修改这个对象的配置newHtmlWebpackPlugin({filename:process.env.NODE_ENV==='testing'?'index.html':(assetsRoot?path.resolve(__dirname,htmlIndex):config.build.index),template:'index.html',inject:true,...}...]//build/utils.js导出下面两个函数exports.findBaseUrl=function(){//特别注意这里的-1要用两个不同的引号（或者JSON.stringify('-1'))letbaseUrlNum='"-1"';if(process.env.BASE_URL){baseUrlNum=process.env.BASE_URL;};returnbaseUrlNum;}exports.findPaths=function(){letpath='../距离';如果（process.env.BASE_URL）{switch（process.env.BASE_URL）{case'0':path='../dist-none';休息;案例'1'：路径='。./dist-193';休息;case'2':path='../dist-113';休息;case'3':path='../dist-192';休息;案例“4”：路径=“../dist-10”；休息;默认值：path='../dist';休息;}};returnpath;}上面的方法修改了打包后webpack输出的地址，避免不同地址都输出到dist文件夹接下来修改axios的baseURL//src/libs/axios.jsimport{getNowUrl,findBaseUrl}from'./util';constservice=axios.create({baseURL:findBaseUrl(),timeout:10000,})//src/libs/utils.jsexportfunctionfindBaseUrl(){letbaseUrl='/';if(process.env.NODE_ENV==='开发'){baseUrl=config.baseUrl.dev;}else{if(process.env.BASE_URL){baseUrl=process.env.BASE_URL==='-1'?config.baseUrl.pro:config.baseUrl.prodUrl[process.env.BASE_URL];}else{baseUrl=config.baseUrl.pro}};返回baseUrl；}；好的，完成！在控制台输入npmrunbuild:none试试：打印出来的路径都正常！查看最终输出摘要。特别注意webpack环境变量接收的值是两个引号括起来的字符串，比如'"development"'，所以在设置环境变量的时候一定要按照文档的规范来做，或使用JSON。字符串化（）。~~~~以上两种环境的配置没有改变默认的开发方式，不会影响其他开发者。这次修改也是在假期期间，新型肺炎比较多。找了半天资料，也没找到好的案例。网上大部分都是加个测试环境，只能自己学了很多。看了一本webpack的书，结合项目慢慢摸索。期间也踩了很多坑，希望对大家有所帮助。我想大多数软件开发人员都在一线城市工作！一线城市的人来自世界各地。复工后，希望大家小心，同时2月3日至2月9日在家工作的几天工资也能拿到。如果大家觉得有什么更好的方法，也可以评论讨论。觉得有用就给我点个心吧。
