其他選項

以下是 webpack 支援的剩餘設定選項。

amd

物件 布林值:false

設定 require.amddefine.amd 的值。將 amd 設定為 false 會停用 webpack 的 AMD 支援。

webpack.config.js

module.exports = {
  //...
  amd: {
    jQuery: true,
  },
};

某些為 AMD 編寫的熱門模組,特別是 jQuery 版本 1.7.0 至 1.9.1,僅當載入程式表示它已針對多個版本採取 特殊允許 時,才會註冊為 AMD 模組。

允許限制註冊至特定版本或支援具有不同定義模組的不同沙盒。

此選項允許您將模組尋找的鍵設定為真值。碰巧的是,webpack 中的 AMD 支援忽略定義的名稱。

bail

布林值 = false

在第一個錯誤發生時失敗,而不是容忍它。預設 webpack 會在終端機中以紅色記錄這些錯誤,以及在使用 HMR 時的瀏覽器主控台中記錄,但會繼續打包。若要啟用它

webpack.config.js

module.exports = {
  //...
  bail: true,
};

這會強制 webpack 退出其打包程序。

dependencies

[字串]

定義所有它依賴的兄弟組態的 name 清單。依賴的組態需要先編譯。

在 watch 模式中,當

  1. 依賴項已變更
  2. 依賴項目前正在編譯或無效

時,依賴項會使編譯器失效。請記住,目前的組態在它的依賴項完成之前不會編譯。

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

ignoreWarnings

[RegExp、函式 (WebpackError、編譯) => 布林值、{模組?: RegExp、檔案?: RegExp、訊息?: RegExp}]

指示 webpack 忽略特定警告。這可以使用 RegExp、自訂 函式來根據取得 WebpackError編譯 作為引數的原始警告實例選擇警告,並傳回 布林值,或具有下列屬性的 物件來完成。

  • 檔案:用於選擇警告原始檔案的 RegExp。
  • 訊息:用於選擇警告訊息的 RegExp。
  • 模組:用於選擇警告原始模組的 RegExp。

ignoreWarnings 必須是上述任何一種或全部的 陣列

module.exports = {
  //...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // A RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    /warning from compiler/,
    (warning) => true,
  ],
};

infrastructureLogging

基礎結構層級記錄的選項。

物件 = {}

appendOnly

5.31.0+

布林值

將行附加至輸出,而不是更新現有輸出,這對於狀態訊息很有用。僅在未提供自訂 主控台 時使用此選項。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    appendOnly: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.status('first output'); // this line won't be overridden with `appendOnly` enabled
      logger.status('second output');
    },
  ],
};

colors

5.31.0+

布林值

啟用基礎結構層級記錄的彩色輸出。僅在未提供自訂 主控台 時使用此選項。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    colors: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.log('this output will be colorful');
    },
  ],
};

console

5.31.0+

主控台

自訂用於基礎結構層級記錄的主控台。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    console: yourCustomConsole(),
  },
};

debug

字串 布林值 = false RegExp 函式 (名稱) => 布林值 [字串、RegExp、函式 (名稱) => 布林值]

啟用指定記錄器的除錯資訊,例如外掛程式或載入器。類似於 stats.loggingDebug 選項,但適用於基礎結構。預設為 false

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
    debug: ['MyPlugin', /MyPlugin/, (name) => name.contains('MyPlugin')],
  },
};

層級

字串 = 'info' : 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'

啟用基礎架構記錄輸出。類似於 stats.logging 選項,但適用於基礎架構。預設為 'info'

可能的值

  • 'none' - 停用記錄
  • 'error' - 僅錯誤
  • 'warn' - 僅錯誤和警告
  • 'info' - 錯誤、警告和資訊訊息
  • 'log' - 錯誤、警告、資訊訊息、記錄訊息、群組、清除。已摺疊的群組會顯示為摺疊狀態。
  • 'verbose' - 記錄除偵錯和追蹤以外的所有內容。已摺疊的群組會顯示為展開狀態。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
  },
};

串流

5.31.0+

NodeJS.WritableStream = process.stderr

用於記錄輸出的串流。預設為 process.stderr。此選項僅在未提供自訂 console 時使用。

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    stream: process.stderr,
  },
};

載入器

物件

將自訂值公開到 載入器內容

例如,您可以在載入器內容中定義一個新變數

webpack.config.js

module.exports = {
  // ...
  loader: {
    answer: 42,
  },
};

然後使用 this.answer 在載入器中取得其值

custom-loader.js

module.exports = function (source) {
  // ...
  console.log(this.answer); // will log `42` here
  return source;
};

名稱

字串

組態名稱。用於載入多個組態時。

webpack.config.js

module.exports = {
  //...
  name: 'admin-app',
};

平行處理

數字 = 100

限制平行處理模組的數量。可用於微調效能或取得更可靠的剖析結果。

剖析

布林值

擷取應用程式的「剖析」,包括統計資料和提示,然後可以使用 分析 工具剖析。它還會記錄模組計時的摘要。

recordsInputPath

字串

指定要從其中讀取最後一組記錄的檔案。這可用於重新命名記錄檔案。請參閱以下範例。

recordsOutputPath

字串

指定記錄應寫入的位置。以下範例顯示如何將此選項與 recordsInputPath 結合使用以重新命名記錄檔案

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsInputPath: path.join(__dirname, 'records.json'),
  recordsOutputPath: path.join(__dirname, 'newRecords.json'),
};

recordsPath

字串

使用此選項產生包含 webpack「記錄」的 JSON 檔案,這些資料用於在多個建置之間儲存模組識別碼。您可以使用此檔案追蹤模組在不同建置之間的變更。若要產生一個,請指定一個位置

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsPath: path.join(__dirname, 'records.json'),
};

如果您有利用 程式碼分割 的複雜設定,記錄會特別有用。這些資料可用於確保分割的套件能達到您需要的 快取 行為。

快照

物件

snapshot 選項決定檔案系統快照的建立和失效方式。

webpack.config.js

const path = require('path');
module.exports = {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, '../node_modules')],
    immutablePaths: [],
    unmanagedPaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

buildDependencies

object = { hash boolean = true, timestamp boolean = true }

使用持續快取時,建立依賴項的快照。

  • hash:比較內容雜湊值以決定是否失效(比 timestamp 昂貴,但變更次數較少)。
  • timestamp:比較時間戳記以決定是否失效。

hashtimestamp 都是選用的。

  • { hash: true }:適用於使用全新結帳的 CI 快取,不會保留時間戳記,並使用雜湊值。
  • { timestamp: true }:適用於本機開發快取。
  • { timestamp: true, hash: true }:適用於上述兩種情況。會先比較時間戳記,這很便宜,因為 webpack 不需要讀取檔案來計算其雜湊值。只有在時間戳記相同的情況下才會比較內容雜湊值,這會對初始建置造成輕微的效能影響。

immutablePaths

(RegExp | string)[]

由套件管理員管理且其路徑中包含版本或雜湊值的許多路徑,因此所有檔案都是不可變的。

如果您使用正規表示式,請務必將路徑包覆在擷取群組中。

managedPaths

(RegExp | string)[]

由套件管理員管理且可信賴不會被修改的途徑陣列。

如果你使用正規表示式,請務必將路徑包覆在擷取群組中,以便 webpack 可以擷取路徑,例如,以下是 webpack 內部用來比對 node_modules 目錄的 RegExp

/^(.+?[\\/]node_modules)[\\/]/

managedPaths 的常見使用案例是從 node_modules 中排除一些資料夾,例如,你希望 webpack 知道 node_modules/@azure/msal-browser 資料夾中的檔案預期會變更,這可以使用類似以下的正規表示式來完成

module.exports = {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

unmanagedPaths

5.90.0+

(RegExp | string)[]

由套件管理員未管理且內容可能會變更的途徑陣列。

如果您使用正規表示式,請務必將路徑包覆在擷取群組中。

module

object = {hash boolean = true, timestamp boolean = true}

用於建置模組的快照。

  • hash:比較內容雜湊值以決定是否失效(比 timestamp 昂貴,但變更次數較少)。
  • timestamp:比較時間戳記以決定是否失效。

resolve

object = {hash boolean = true, timestamp boolean = true}

用於解析請求的快照。

  • hash:比較內容雜湊值以決定是否失效(比 timestamp 昂貴,但變更次數較少)。
  • timestamp:比較時間戳記以決定是否失效。

resolveBuildDependencies

object = {hash boolean = true, timestamp boolean = true}

使用持續快取時,用於解析建置相依性的快照。

  • hash:比較內容雜湊值以決定是否失效(比 timestamp 昂貴,但變更次數較少)。
  • timestamp:比較時間戳記以決定是否失效。

延伸閱讀

15 貢獻者

sokraskipjackterinjokesbyzykliorgreenbvansosninEugeneHlushkoskovyrishabh3112niravasherNeob91chenxsanu01jmg3jamesgeorge007snitin315