webpack正式、测试环境接口地址本地运行及打包命令配置
声明：本文由w3h5原创，转载请注明出处：《webpack正式、测试环境接口地址本地运行及打包命令配置》 https://www.w3h5.com/post/521.html
为了方便开发，节省接口地址修改维护时间，可以通过 webpack 配置，区分正式、测试环境。
可以方便的通过一个命令或者参数，运行或者连接不同环境的接口地址：
# 本地运行测试环境
npm run dev
# 本地运行正式环境
npm run prod
# 测试环境打包
npm run build
# 正式环境打包
npm run build prod
先了解几个概念：
process.argv ：
process 对象是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。 因为是全局变量，所以无需使用 require()。
process.argv 属性返回一个数组，这个数组包含了启动 Node.js 进程时的命令行参数。
其中：
数组的第一个元素 process.argv[0] 返回启动 Node.js 进程的可执行文件所在的绝对路径。
第二个元素 process.argv[1] 为当前执行的 JavaScript 文件路径。
剩余的元素为其他命令行参数。
例如运行：
node process-args.js one two=three four
此时：
process.argv = ['/usr/local/bin/node', '<path>process-args.js', 'one', 'two=three', 'four']
webpack 也同样支持 argv 参数，在 package.json 中配置命令：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
},
我们就可以从 process.argv[4] 拿到 "--env=prod" 这个参数。
打印出来的效果如下：
# process.argv
[ '/usr/local/bin/node',
'/www/w3h5/node_modules/.bin/webpack',
'--inline',
'--progress',
'--env=prod',
'--config' ]
配置方法：
首先修改 webpack 的配置文件， /config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let params = process.argv[4]
let baseUrl = ''
switch (params) {
case '--env=prod': //正式环境地址
baseUrl = '"https://api.w3h5.com/"',//首页地址
break
default: //测试环境地址
baseUrl = '"http://api-test.w3h5.com/"',//首页地址
}
module.exports = merge(prodEnv, {//process.env.HOME_URL
NODE_ENV: '"development"',
HOME_URL: baseUrl,//首页地址
})
先声明一个变量 params ，然后将 --env=prod （代表正式环境）赋值给它。
使用 switch case 语句进行判断，如果有这个代表正式环境的参数，则使用正式环境的地址。如果没有这个参数，则默认走测试环境。
然后将 HOME_URL 变量用 module.exports 导出。
这样就可以通过 npm 命令来区分运行正式还是测试环境了。
# 测试环境
npm run dev
# 正式环境
npm run prod
打包命令配置：
和上面一样，修改 /config/prod.evn.js 文件：
'use strict'
let params = process.argv[2]
let baseUrl = ''
switch (params) {
case 'prod': //正式环境地址
baseUrl = '"https://api.w3h5.com/"',//首页地址
break
default: //测试环境地址
baseUrl = '"http://api-test.w3h5.com/"',//首页地址
}
module.exports = merge(prodEnv, {//process.env.HOME_URL
NODE_ENV: '"production"',
HOME_URL: baseUrl,//首页地址
})
细心的朋友可能会注意到，这里给 params 赋得值是 process.argv[2] ，可以看一下 package.json 中配置的命令：
"scripts": {
"build": "node build/build.js"
},
因为 build 命令只有两个参数，执行下面的命令，就可以将第三个参数 prod 带过去：
# 测试环境打包
npm run build
# 正式环境打包
npm run build prod
前端直接调用
项目运行后，前端就可以直接用 process.env.HOME_URL 获取到首页的地址了。
测试环境会显示：http://api-test.w3h5.com/
正式环境就是：https://api.w3h5.com/
什么是 process.env ：
通常情况下，我们需要针对不同环境（开发环境、集成环境、生产环境等），进行相应策略的打包（比如是否替换接口地址，代码是否压缩等）。webpack 就是通过 process.env 属性加以区分。
webpack 是 npm 生态中的一个模块，webpack 运行依赖于 node 环境。这里的 process.env 是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。
如果我们给 Nodejs 设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。
process.env 属性返回一个对象，包含了当前 Shell 的所有环境变量。比如，process.env.HOME 返回用户的主目录。
通常的做法是，新建一个环境变量 NODE_ENV ，用它确定当前所处的开发阶段，生产阶段设为 production ，开发阶段设为 development 或 testing ，然后在脚本中读取 process.env.NODE_ENV 即可。
要说明的是，NODE_ENV 这个名称只是开发社区的一种共识，名称内容是可以修改的。如果需要，你也可以把它定义为 NODE_abc 或者 xxx 都行。
参考文献：
