浅谈Webpack下多环境配置的思路

　　


　　

　　

由于前后端分离的前端应用脱离了后端的支持,在单独开发前端应用时,页面调试时使用固定的开发环境地址还好,如果出现在本地开发时需要调试不同环境的远端API,或者需要将应用部署到不同环境的服务器上时,如果不将这些环境对应的服务器地址,环境专属变量等单独配置,也许每次切换环境都需要修改大量代码。网上关于这部分的资料较少,所以下面将以用<代码> vue-cli init 命令生成的Vue/Webpack <代码> 项目作为例子,介绍一下我当前正在使用的简单的多环境配置的思路。

　　


　　

　　

在后端开发中,项目中不同环境对应的参数配置在不同的配置文件中。当需要打包基于Maven的Java项目时,通常只需要在打包命令的后面加上- p参数指定轮廓环境,即可打包出对应环境的包,同理前端在使用webpack开发或者打包时如果也能这么做,就会方便很多。

　　 　　/* maven常用打包命令*/mvn清洁包- p戳 　　 　　

而在前端项目中,调试与打包命令<代码> vue-cli init 已经为我们在<代码> package.json> 　　 　　/*/包。json */"脚本":{ 　　“开发”:“webpack-dev-server——内联——发展——配置构建/webpack.dev.conf.js”, 　　“开始”:“npm dev运行”, 　　“棉絮”:“eslint, ext js。vue src”, 　　“构建”:“节点构建/build.js” 　　} 　　之前 　　 　　

如果可以将这些命令改造成后端中类似的打包命令,就很方便了,例如:

　　 　　/*改造后的命令,只是打个比方,实际并不一定是这样*/"脚本":{ 　　:“开始:dev npm dev - p dev运行”, 　　:“构建:测试节点构建/构建。js - p测试” 　　}/*命令行*/美元npm开始运行:/dev/本地调试,开发环境 　　美元npm运行构建:测试//打包,测试环境 　　 　　之前 　　 　　

所以首先需要解决的是如何把参数传递到调试/打包的脚本中。

　　

<强>注意:这里想特别说明一下的是,<代码> vue-cli 脚手架帮我们生成好了整个项目,而且也有对应<代码> webpack.dev.conf.js 和<代码> webpack.prod.conf.js> dev.conf.js/prod.conf.js> dev/测试/pre/刺激> webpack.debug.conf.js 和<代码> webpack.build.conf.js> 　　


　　

　　

在<代码> node . js代码中传递参数到脚本中,有多种方法,例如使用<代码> process.argv :

　　 　　/*你好。js */控制台。日志(‘你好’,process.argv [2]);/*命令行*/节点。美元/你好。js tidus//过程。argv=[“节点”、“。/你好。js”、“tidus '] 　　你好tidus 　　之前 　　 　　

虽然process.argv很方便,但可配置性不高,所以这里用的是yargs,它是节点。js中的一个组件,可以通过npm直接安装。
===在戳我查看yargs的api文档

　　 　　 　　美元npm安装yargs - dev -保存/*你好。js */const argv=要求(yargs) .argv; 　　控制台。日志(‘你好’,argv.env);/*命令行*/节点。美元/你好。js - env测试 　　你好,测试 　　之前 　　 　　

通过yargs可以方便的获取指定名称的命令行参数,接下来就要看看如何利用这个参数实现多文件配置。

　　


　　

　　

首先在<代码> Webpack> DefinePlugin> /config> 　　 　　/*/构建/webpack.dev.conf.js: */插件:[ 　　新webpack.DefinePlugin ({//源码中所有的过程。env都会被替换为//. ./config/dev。env”这个模块出口出来的东西 　　的过程。env”:要求(“. ./config/dev.env”) 　　}） 　　]/*/config/dev.env。js */使用严格的 　　常量合并=要求(“webpack-merge”) 　　const prodEnv=要求(“。/prod.env”) 　　 　　模块。出口=合并(prodEnv, { 　　NODE_ENV:”“发展”“ 　　}） 　　 　　

浅谈Webpack下多环境配置的思路