DefinePlugin

DefinePlugin 會在編譯時間用其他值或運算式取代程式碼中的變數。這對於允許開發組建和製作組建之間有不同的行為很有用。如果您在開發組建中進行記錄，但在製作組建中沒有進行記錄，則可以使用全域常數來確定是否進行記錄。這就是 DefinePlugin 發揮作用的地方，設定它並忘記它，以進行開發和製作組建。

new webpack.DefinePlugin({
  // Definitions...
});

使用

傳遞到 DefinePlugin 的每個金鑰都是識別碼，或多個識別碼使用 . 結合。

• 如果值是字串，它將用作程式碼片段。
• 如果值不是字串，它將被字串化（包括函式）。
• 如果值是物件，則所有金鑰都以相同方式定義。
• 如果您在金鑰前面加上 typeof，則它只會定義給 typeof 呼叫。

這些值將內嵌到程式碼中，允許最小化傳遞移除多餘的條件式。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

console.log('Running App version ' + VERSION);
if (!BROWSER_SUPPORTS_HTML5) require('html5shiv');

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

在未縮小的 webpack 中傳遞後，結果為

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

然後在縮小後，結果為

console.log('Production log');

功能旗標

使用功能旗標在生產/開發建置中啟用/停用功能。

new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false),
});

服務 URL

在生產/開發建置中使用不同的服務 URL

new webpack.DefinePlugin({
  SERVICE_URL: JSON.stringify('https://dev.example.com'),
});

透過 runtimeValue 的執行時期值

函式 (getterFunction, [字串] | true | 物件) => getterFunction()

可以定義值依賴於檔案的變數，且當檔案系統中的此類檔案變更時，將重新評估這些值。這表示 webpack 會在這些監控的檔案變更時重新建置。

webpack.DefinePlugin.runtimeValue 函式有兩個引數

• 第一個引數是 function(module, key, version)，它應該傳回要指定給定義的值。

• 第二個引數可以是監控的檔案路徑陣列，或 true 來將模組標示為無法快取。自 5.26.0 起，它也可以採用具有下列屬性的物件引數

  • fileDependencies?: string[] 函式所依賴的檔案清單。
  • contextDependencies?: string[] 函式所依賴的目錄清單。
  • missingDependencies?: string[] 函式所依賴但不存在的檔案清單。
  • buildDependencies?: string[] 函式所依賴的建置依賴項清單。
  • version?: string | () => string 函式的版本。

const fileDep = path.resolve(__dirname, 'sample.txt');

new webpack.DefinePlugin({
  BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now, {
    fileDependencies: [fileDep],
  }),
});

BUILT_AT 的值會是檔案系統中 'sample.txt' 最後更新的時間，例如 1597953013291。