webpack-cli搭建得项目 分环境控制变量 .env

问题

实际开发过程当中，例如url 会根据不同得环境不一样，有分测试，开发，生产，预生产等，可以根据不同得环境来配置不同得环境变量，下面解决过程基于node10以上

1.第一步：在package.json中配置脚本

通过 --e test --e prod来告知webpack打包得环境，平常来说webpack是无法识别得需要借助插件yargs

注意：这里想特别说明一下的是，vue-cli脚手架帮我们生成好了整个项目，而且也有对应webpack.dev.conf.js和webpack.prod.conf.js两个分离的webpack配置文件，但由于文件的命名问题（dev.conf.js/prod.conf.js），很容易让人误以为这两个文件就是webpack针对不同环境的配置。但实际上这两个文件一个是用于本地调试时的配置文件，另一个是用于打包部署的配置文件。调试/打包两种模式 与 环境（dev/test/pre/prod等）是可以相互组合的。理论上来讲这两个webpack的配置文件我觉得应该叫webpack.debug.conf.js和webpack.build.conf.js会更贴切一点。

npm install yargs --dev --save

2.第二步 创建文件

webpack.env.conf.js 来处理指令后面–e 得参数来动态加载不同得env文件

// 定义参数配置
const argv = require('yargs').argv

// 获取环境变量
const env = argv.e || 'commond'
process.stdout.write('the env is ' + env + '\n')

// require指定的环境配置文件
const envConfigFile = '../config/' + env + '.env.js'
process.stdout.write('the env config file is ' + envConfigFile + '\n')

console.log(envConfigFile)
// 将require的配置文件原封不动export回出去
module.exports = require(envConfigFile)```

test.env.js 其他几个.env文件一样  commond是在webpack.env.conf.js中默认处理

```bash
/* /config/test.env.js */
'use strict'
module.exports = {
	NODE_ENV: '"test"',
	PAY_URL: '"http://etbc.hw-qa.eslink.net.cn/saas-cloudselfhelp"', //自助去缴费测试环境
}

3.第三步，在webpack配置文件中找到DefinePlugin插件配置全局变量
注意 我这项目里有3个webpack.base.conf webpack.build.conf webpack.dev.conf ，不同得项目都可以不一样，主要是找到你要打包执行得webpack配置文件，

const envConfig = require('./webpack.env.conf')
new webpack.DefinePlugin({
						'process.env': {
							PLATFORM: JSON.stringify('web'),
							SERVER: JSON.stringify('testing'),
							MONITOR: JSON.stringify(false),
							...envConfig,
						},
					}),

这样就行了

打印console.log(process.env) 这是默认commond.env.js