webpack正式、測試環境介面地址本地執行及打包命令配置
宣告：本文由w3h5原創，轉載請註明出處：《webpack正式、測試環境介面地址本地執行及打包命令配置》https://www.w3h5.com/post/521.html
為了方便開發，節省介面地址修改維護時間，可以通過 webpack 配置，區分正式、測試環境。
可以方便的通過一個命令或者引數，執行或者連線不同環境的介面地址：
#本地執行測試環境
npmrundev #本地執行正式環境
npmrunprod #測試環境打包
npmrunbuild #正式環境打包
npmrunbuildprod
先了解幾個概念：
process.argv ：
process物件是一個全域性變數，它提供當前 Node.js 程式的有關資訊，以及控制當前 Node.js 程式。 因為是全域性變數，所以無需使用require()
process.argv屬性返回一個陣列，這個陣列包含了啟動 Node.js 程式時的命令列引數。
其中：
陣列的第一個元素process.argv[0]返回啟動 Node.js 程式的可執行檔案所在的絕對路徑。
第二個元素process.argv[1]為當前執行的 JavaScript 檔案路徑。
剩餘的元素為其他命令列引數。
例如執行：
nodeprocess-args.jsonetwo=threefour
此時：
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--configbuild/webpack.dev.conf.js",
"prod":"webpack-dev-server--inline--progress--env=prod--configbuild/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
'usestrict'
constmerge=require('webpack-merge')
constprodEnv=require('./prod.env') letparams=process.argv[4]
letbaseUrl='' 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 命令來區分執行正式還是測試環境了。
#測試環境
npmrundev #正式環境
npmrunprod
打包命令配置：
和上面一樣，修改 /config/prod.evn.js 檔案：
'usestrict' letparams=process.argv[2]
letbaseUrl='' 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":"nodebuild/build.js"
},
因為 build 命令只有兩個引數，執行下面的命令，就可以將第三個引數 prod 帶過去：
#測試環境打包
npmrunbuild #正式環境打包
npmrunbuildprod
前端直接呼叫
專案執行後，前端就可以直接用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 都行。
參考文獻：