EnvironmentPlugin

EnvironmentPlugin 是使用 DefinePlugin 的簡寫，用於 process.env 鍵。

用法

EnvironmentPlugin 接受一個鍵陣列或一個將其鍵對應到其預設值的物件。

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

這等於下列 DefinePlugin 應用程式

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

使用預設值

或者，EnvironmentPlugin 支援一個物件，將鍵對應到其預設值。如果鍵在 process.env 中未定義，則採用該鍵的預設值。

new webpack.EnvironmentPlugin({
  NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
  DEBUG: false,
});

範例

讓我們探討在測試檔案 entry.js 上執行先前的 EnvironmentPlugin 組態的結果

if (process.env.NODE_ENV === 'production') {
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  console.log('Debugging output');
}

在終端機中執行 NODE_ENV=production webpack 以進行建置時，entry.js 會變成這樣

if ('production' === 'production') {
  // <-- 'production' from NODE_ENV is taken
  console.log('Welcome to production');
}
if (false) {
  // <-- default value is taken
  console.log('Debugging output');
}

執行 DEBUG=false webpack 會產生

if ('development' === 'production') {
  // <-- default value is taken
  console.log('Welcome to production');
}
if ('false') {
  // <-- 'false' from DEBUG is taken
  console.log('Debugging output');
}

使用案例：Git 版本

下列 EnvironmentPlugin 組態提供 process.env.GIT_VERSION (例如「v5.4.0-2-g25139f57f」) 和 process.env.GIT_AUTHOR_DATE (例如「2020-11-04T12:25:16+01:00」)，對應於儲存庫的最後一次 Git 提交

const child_process = require('child_process');
function git(command) {
  return child_process.execSync(`git ${command}`, { encoding: 'utf8' }).trim();
}

new webpack.EnvironmentPlugin({
  GIT_VERSION: git('describe --always'),
  GIT_AUTHOR_DATE: git('log -1 --format=%aI'),
});

DotenvPlugin

第三方 DotenvPlugin (dotenv-webpack) 允許您公開 (部分) dotenv 變數

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

new Dotenv({
  path: './.env', // Path to .env file (this is the default)
  safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
});