DefinePlugin

? DefinePlugin? 允許在 編譯時 將你代碼中的變量替換為其他值或表達(dá)式。這在需要根據(jù)開發(fā)模式與生產(chǎn)模式進(jìn)行不同的操作時，非常有用。例如，如果想在開發(fā)構(gòu)建中進(jìn)行日志記錄，而不在生產(chǎn)構(gòu)建中進(jìn)行，就可以定義一個全局常量去判斷是否記錄日志。這就是 ?DefinePlugin? 的發(fā)光之處，設(shè)置好它，就可以忘掉開發(fā)環(huán)境和生產(chǎn)環(huán)境的構(gòu)建規(guī)則。

new webpack.DefinePlugin({
  // 定義...
});

Usage

傳遞給 ?DefinePlugin? 的每個鍵都是一個標(biāo)識符或多個以 . 連接的標(biāo)識符。

• 如果該值為字符串，它將被作為代碼片段來使用。
• 如果該值不是字符串，則將被轉(zhuǎn)換成字符串（包括函數(shù)方法）。
• 如果值是一個對象，則它所有的鍵將使用相同方法定義。
• 如果鍵添加 typeof 作為前綴，它會被定義為 typeof 調(diào)用。

這些值將內(nèi)聯(lián)到代碼中，從而允許通過代碼壓縮來刪除冗余的條件判斷。

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');
}

未經(jīng) webpack 壓縮過的代碼：

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

經(jīng)過壓縮后：

console.log('Production log');

Feature Flags

使用 feature flags 在生產(chǎn)/開發(fā)構(gòu)建中可以啟用/禁用項(xiàng)目的不同特性。

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

Service URL

在生產(chǎn)或開發(fā)構(gòu)建中使用不同的服務(wù) URL：

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

Runtime values via runtimeValue

?function (getterFunction?, ?[string] | true | object) => getterFunction()?

可以使用依賴于文件的值定義變量，并且當(dāng)這些文件在文件系統(tǒng)中更改時將重新評估。這意味著 webpack 將在此類監(jiān)視文件更改時重建。

?webpack.DefinePlugin.runtimeValue? 函數(shù)有兩個參數(shù)：

• 第一個參數(shù)是一個函數(shù)（模塊、鍵、版本），它應(yīng)該返回要分配給定義的值。

• 第二個參數(shù)可以是要監(jiān)視的文件路徑數(shù)組，也可以是將模塊標(biāo)記為不可緩存的 true。從 5.26.0 開始，它還可以采用具有以下屬性的對象參數(shù)：

?fileDependencies?: string[]?  函數(shù)依賴的文件列表。

?contextDependencies?: string[]?  函數(shù)依賴的目錄列表。

?missingDependencies?: string[]?  函數(shù)依賴的不存在文件列表。

?buildDependencies?: string[]?  函數(shù)依賴的構(gòu)建依賴列表。

?version?: string | () => string?  函數(shù)的一個版本。

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

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

?BUILT_AT? 的值將是文件系統(tǒng)中上次更新?“sample.txt”?的時間，例如?1597953013291?。