聲明：本文由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 都行。
參考文獻：