definePlugin和env變量有什麼區別？

Question

經過一番嘗試，我發現webpack.definePlugin和通過npm腳本傳遞的環境變量的效果是一樣的。 爲什麼需要definePlugin？

Answer 1

那麼，在某些情況下，在代碼中廣泛使用env變量會變得冗長或不安全。

實例一：添加更多的邏輯

NODE_ENV=production webpack ...

隨着DefinePlugin，你可以定義

__PRODUCTION__: process.env === 'production'

然後在代碼中你可以使用__PRODUCTION__而不是再次寫入process.env === 'production'遍地碼。

例2：然後你使用__ENV__比process.env其他會給少驚喜提供後備

__ENV__: process.env || 'development'

。

此外，你也可以定義其他東西，不限制env變量。

Answer 2

因爲你可能只想設置一個全局es6變量而沒有env變量，例如，當你有一個環境變量和一個具有相同名稱但用途不同的全局變量時。

Answer 3

一個典型的例子：

不能直接客戶端代碼使用process.env.NODE_ENV。

因爲它的代碼是nodejs。

但是，很多客戶端代碼，特別是third-party庫。

他們將有一些development的代碼，如warning,log等等。

喜歡：

if(process.env.NODE_ENV === 'development') { makeWarinig(); } 

但在生產中，您不希望這些代碼bundle.js。所以，你可以通過NODE_ENV=production來告訴library。

webpack.DefinePlugin將取代process.env.NODE_ENV與您在webpack.config.js中定義的相同。

像：nodejs cli環境變量傳遞給webpack.config.js，並通過webpackDefinePlugin將該變量傳遞給客戶端代碼。

Answer 4

通常在我們的項目中，我們使用新的webpack.DefinePlugin來定義可以在客戶端全局使用的全局值。

if (process.env.NODE_ENV === 'production') { 
    config.plugins.push(
     new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     } 
     }), 
     new webpack.optimize.UglifyJsPlugin() 
    ) 
} 

兩個process.env.NODE_ENV看起來相同但實際上不同。 第一個是在package.json中定義的。它看起來像：

"scripts": { 
    "build": "NODE_ENV='production' webpack -p" 
}, 

它在節點服務器端定義NODE_ENV ='生產'。它可以在webpack中訪問，但不能在客戶端訪問。所以在webpack.config.js中，我們需要重新定義它，以便我們可以在我們的客戶端使用它。