關於如何使用webpack命令行傳入變數，並通過process.env來調用

關於這個問題著實讓人頭疼。對於大型的項目而言，配置太過複雜了。以下是我的需求場景及【解決方案】

由於當前的項目是在開源DEMO的基礎上做的。所以裡面的很多webpack配置我都不熟，簡直讓我生不如死。

• 需求
• 原本的DEMO分成 dev環境和pro環境。
• 在打包的時候一定是pro環境，這個打包並不是單純的webpack打包。而是把程序打包成 PC應用【electron】。
• 原本DEMO的配置，在做這個打包軟體的操作中就是設置成 process.env.NODE_ENV=』production』，但是我希望在使用
• NODE_ENV=』production』的情況下，再分兩種情況。一種是請求我們的測試地址http.dev.com ，另一種是線上地址http.pro.com 。【因為是在DEMO基礎上做，所以我不可能去更改原有的配置，裡面還涉及了electron的打包配置，而不單單是webpack的打包。否則牽一髮動全身，心有餘力不足，所以我只能在NODE_ENV為production的情況下在增加一個變數去獲取】

剛開始我每次打包軟體之前總是去修改配置文件參數，到底是請求 測試地址還是線上地址。再打包，但是這樣相當的麻煩。

於是我想通過webpack 命令行的方式去代替我手動更改參數。

為此查到了以下幾個方案：【一下方案都沒有解決我的情況，但是其中的一些問題還是要說一下】

1、直接在webpack命令行輸入參數 –xxx yyy 即配置xxx參數，它的值為yyy，這樣，可以通過var argv = require("yargs").argv.xxx;去獲取，但是這種方式，只能在webpack.config.js的配置文件中獲取，如果你希望在自己的某一個xx.js文件中調用，執行webpack命令是會報錯的。而且，由於webpack版本問題，在4.x 的時候是允許通過 --的形式去傳參的，但是在我的3.12.x版本中，無法這樣傳參，會報錯

2、cross-env模塊， npm i -D cross-env 模塊，在package.json文件中寫上

"build-main": "cross-env NODE_ENV=production http_env=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --colors",

cross-env原本是用於跨平台的命令的。在執行webpack命令之前寫上 cross-env xxx=yyy即可配置，那麼即可通過process.env.xxx來訪問這個變數而不需要引入 yargs等模塊。但是根據我測試。貌似只有你的程序在node環境下執行才能全局獲取到這個變數，否則在webpack打包的時候，也只能在webpack.config.js文件下拿到，而其他自定義JS文件還是undefined。具體情況可以自己試一試，我有點模糊了，因為查了太多資料。忘記了當時的情況。但它肯定是不符合我的需求的

解決方案

new webpack.DefinePlugin({

http_env:JSON.stringify("parameter")

})

//確保你的變數值是用 JSON.stringify轉換的，或者是 ""parameter""這種形式，打包的時候會把http_env全局變數替換成 "parameter" 所以，雙引號需要保留

• 1
• 2
• 3
• 4

webpack.DefinePlugin允許你定義全局變數，在自定義文件中訪問它。許多人會把這個值付給process.env,比如

new webpack.DefinePlugin({

"process.env":{

http_env:JSON.stringify("parameter")

}

})

• 1
• 2
• 3
• 4
• 5

這樣就可以通過process.env去獲取。

但是！，因為之前說的因為webpack版本的原因，我在3.12.x版本無法通過webpack命令行 通過 --去自定義傳參，否則報錯，所以我使用了cross-env模塊去傳參，那麼我在webpack.config.js文件下就可以通過process.env.xxx去獲取。結果我寫了下面這句

//命令行中的參數（兩條命令，不同文件用不同webpack配置文件打包）：

//cross-env http_env=development webpack --config xxx.config.js

//cross-env http_env=development webpack --config yyy.config.js

new webpack.DefinePlugin({

"process.env":{

http_env:JSON.stringify(process.env.http_env)

}

})

//結果我在 A.js文件中正常通過process.env.http_env環境拿到了，A.js是通過 xxx.config.js webpack配置文件打包的

//而 B.js 則無法正常獲取，B.js是通過yyy.config.js webpack文件打包的

//我想了半天沒想明白，畢竟無論是xxx.config.js還是yyy.config.js都是基於

// common.config.js配置文件通過webpack-merge合併的。為什麼一個能拿到另一個拿不到呢？

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

最終我改寫成下面這樣。

new webpack.DefinePlugin({

http_env:JSON.stringify(process.env.http_env)

})

//我直接去掉了process.env作為key，通過A.js和 B.js自定義文件中的內容也從 process.env.http_env改成了

//http_env，最終的打包效果全都正常輸出，說明通過cross-env獲取命令行參數再賦值給全局變數是有問題的。

//理論上沒什麼問題，但很明顯它不兼容

• 1
• 2
• 3
• 4
• 5
• 6

到此，折磨我一段時間的webpack配置有了著落了，看來還是跟不上時代啊。當時看webpack還是2.x再用的時候已是4.x

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！