webpack中使用DefinePlugin來傳遞構建的環境變量給源代碼使用

最近在思考如何提供一種先後端開發功能測試既高效又安全的方案，由於對於我平時的項目是先後端同時進行的，後端我已經有了完備的權限管理，前端不能的角色會有不一樣的訪問數據權限。而在vue先後端分離開發狀況下，因爲後端沒有登錄人員的信息，所以除了開放訪問的資源都是被拒絕訪問的。這時有沒有什麼辦法能夠在dev環境下開放權限，而在構建的生產版本中是有完整權限控制的呢？

一個天然的思路是：若是是dev環境後端就放開全部權限，若是是生產環境就有權限管理。可是問題是這個dev環境是指前端的，後端並不能知道。要通知後端是開發仍是生產環境，能夠經過http的header來傳遞這個信息。當咱們在作前端開發時，就傳這個header,不然就不加該header條目。

另一方面，咱們必須考慮安全性，由於前端傳遞dev/prod信息是不可靠的，個人思路是前端除了傳遞一個dev/prod環境以外，還必須傳一個token密碼，該密碼屬於敏感信息，所以不會在代碼中出現。問題又來了，因爲密碼信息在env.js中配置，只有webpack構建時經過nodejs代碼讀取，如何傳遞給咱們的源代碼呢？

要解決這個問題，就須要介紹webpack的DefinePlugin了，它能夠將webpack的構建信息傳遞給咱們的js源代碼!

咱們再看另一個常見場景:咱們的ajax請求對應的host主機在開發和生產確定是不同的，這時對於dev和prod兩種場景，咱們但願將對應的host/port信息傳遞給咱們的源代碼，這樣不管在dev,staging,prod都能請求到正確的entry.這時也是DefinePlugin的一個應用場景。

具體辦法:

 

 

 

 

 

 上面咱們經過__API__這個由DefinePlugin定義的變量傳遞到咱們的js代碼中，這樣咱們的js代碼經過hostUrl這個常量就能永遠訪問到正確的entry了！

其中有一點須要注意的是DefinePlugin定義的變量若是是字符串必須使用 "' your string '" 這種形式，通常咱們能夠經過stringify調用就行了，由於它自動會加上雙引號!

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production'),
}),