閱讀(986) 書簽贊(0) 我要糾錯

Webpack 其它選項

2023-05-17 14:45 更新

這里是 webpack 支持的其它選項。

amd

?object boolean: false?

設(shè)置 require.amd 或 define.amd 的值。設(shè)置 amd 為 false 會禁用 webpack 的 AMD 支持。

webpack.config.js

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

某些流行的模塊是按照 AMD 規(guī)范編寫的，最引人矚目的 jQuery 版本在 1.7.0 到 1.9.1，如果 loader 提示它對頁面包含的多個版本采取了特殊許可時，才會注冊為 AMD 模塊。

許可權(quán)限是具有「限制指定版本注冊」或「支持有不同定義模塊的不同沙盒」的能力。

此選項允許將模塊查找的鍵(key)設(shè)置為真值(truthy value)。發(fā)生這種情況時，webpack 中的 AMD 支持將忽略定義的名稱。

bail

?boolean = false?

在第一個錯誤出現(xiàn)時拋出失敗結(jié)果，而不是容忍它。默認情況下，當使用 HMR 時，webpack 會將在終端以及瀏覽器控制臺中，以紅色文字記錄這些錯誤，但仍然繼續(xù)進行打包。要啟用它：

webpack.config.js

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

這將迫使 webpack 退出其打包過程。

dependencies

?[string]?

一個 name 列表，定義它所依賴的所有兄弟（sibling）配置。需要首先編譯依賴的配置。

在 watch 模式下，當出現(xiàn)以下情況時，依賴項將使編譯器失效：

依賴項發(fā)生變化
依賴項當前正在編譯或者處于無效狀態(tài)

請記住，在完成依賴項編譯之前，不會編譯此配置。

webpack.config.js

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

ignoreWarnings

?[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]?

告訴 webpack 忽略掉特定的警告。類型可以是 RegExp，可以是自定義 function。如果類型為函數(shù)，可基于原始 warning 來選擇性展示警告，其參數(shù)分別為 WebpackError 和 Compilation，且返回值為 boolean。還可以包含以下屬性的 object：

?file?：類型為 RegExp，用于選擇出現(xiàn)警告的源文件。
?message?：類型為 RegExp，用于選擇警告的內(nèi)容。
?module?：類型為 RegExp，用于選擇警告來源的模塊。

ignoreWarnings 必須是上述任意或所有類型組成的 array。

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

infrastructureLogging

用于基礎(chǔ)設(shè)施水平的日志選項。

?object = {}?

appendOnly

5.31.0+

?boolean?

將內(nèi)容追加到現(xiàn)有輸出中，而非更新現(xiàn)有輸出，這對于展示狀態(tài)信息來說非常有用。此選項僅在未提供自定義 console 的情況下使用。

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+

?boolean?

為基礎(chǔ)設(shè)施日志啟用帶有顏色的輸出。此選項僅在未提供自定義 console 的情況下使用。

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+

?Console?

為基礎(chǔ)設(shè)施日志提供自定義方案。

webpack.config.js

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

debug

?string? ?boolean = false RegExp function(name) => boolean [string, RegExp, function(name) => boolean]?

開啟特定日志比如插件(plugins)和加載器(loaders)的調(diào)試信息。與 stats.loggingDebug 選項類似但僅僅對于基礎(chǔ)設(shè)施而言。默認為 false。

webpack.config.js

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

level

開啟基礎(chǔ)設(shè)施日志輸出。與 stats.logging 選項類似但僅僅是對于基礎(chǔ)設(shè)施而言。默認值為 'info'。

可能的取值：

?'none'? - 禁用日志
?'error'? - 僅僅顯示錯誤
?'warn'? - 僅僅顯示錯誤與告警
?'info'? - 顯示錯誤、告警與信息
?'log'? - 顯示錯誤、告警，信息，日志信息，組別，清楚。收縮的組別會在收縮的狀態(tài)中被顯示。
?'verbose'? - 輸出所有日志除了調(diào)試與追蹤。收縮的組別會在擴展的狀態(tài)中被顯示。

webpack.config.js

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

stream

5.31.0+

?NodeJS.WritableStream = process.stderr?

用于日志輸出的流。默認為 process.stderr。此選項僅在未提供自定義 console 的情況下使用。

webpack.config.js

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

loader

?object?

在 loader 上下文中暴露自定義值。

例如，你可以在 loader 上下文中定義一個新變量：

webpack.config.js

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

然后使用 this.answer 在 loader 中獲取該值：

custom-loader.js

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

name

?string?

配置的名稱。當加載不同的配置時會被使用。

webpack.config.js

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

parallelism

?number = 100?

限制并行處理的模塊數(shù)量?？梢杂糜谡{(diào)優(yōu)性能或獲取更可靠的性能分析結(jié)果。

profile

?boolean?

捕獲一個應(yīng)用程序"配置文件"，包括統(tǒng)計和提示，然后可以使用 Analyze 分析工具進行詳細分析。

recordsInputPath

?string?

指定讀取最后一條記錄的文件的名稱。這可以用來重命名一個記錄文件，可以查看下面的實例：

recordsOutputPath

?string?

指定記錄要寫入的位置。以下示例描述了如何用這個選項和 recordsInptuPaht 來重命名一個記錄文件：

webpack.config.js

const path = require('path');

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

recordsPath

?string?

開啟這個選項可以生成一個 JSON 文件，其中含有 webpack 的 "records" 記錄 - 即「用于存儲跨多次構(gòu)建(across multiple builds)的模塊標識符」的數(shù)據(jù)片段。可以使用此文件來跟蹤在每次構(gòu)建之間的模塊變化。只要簡單的設(shè)置一下路徑,就可以生成這個 JSON 文件：

webpack.config.js

const path = require('path');

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

如果你使用了代碼分離(code splittnig)這樣的復(fù)雜配置，records 會特別有用。這些數(shù)據(jù)用于確保拆分 bundle，以便實現(xiàn)你需要的緩存(caching)行為。

snapshot

?object?

snapshot 配置項決定文件系統(tǒng)是如何創(chuàng)建和無效快照。

webpack.config.js

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

buildDependencies

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

使用持久化緩存時的依賴構(gòu)建關(guān)系快照。

?hash?：比較內(nèi)容哈希以確定無效（比 timestamp 更昂貴，但更改的頻率較低）。
?timestamp?：比較 timestamps 以確定無效。

hash 與 timestamp 都是可選配置。

?{ hash: true }?：對 CI 緩存很有幫助，使用新的 checkout，不需要保存時間戳，并且使用哈希。
?{ timestamp: true }?：對應(yīng)本地開發(fā)緩存很用幫助。
?{ timestamp: true, hash: true }?：對于以上提到的兩者都很有幫助。首先比較時間戳，這代價很低，因為 webpack 不需要讀取文件來計算它們的哈希值。僅當時間戳相同時才會比較內(nèi)容哈希，這對初始構(gòu)建的性能影響很小。

immutablePaths

?(RegExp | string)[]?

由包管理器管理的路徑數(shù)組，在其路徑中包含一個版本或哈希，以便所有文件都是不可變的（immutable）。

如果使用正則表達式，請確保將路徑包裹在捕獲組中。

managedPaths

如果使用正則表達式，請確保將路徑包裹在捕獲組中。

managedPaths

?(RegExp | string)[]?

由包管理器管理的路徑數(shù)組，可以信任它不會被修改。

如果使用正則表達式，請確保將路徑包裹在捕獲組中。

module

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

構(gòu)建模塊的快照。

?hash?：比較內(nèi)容哈希以判斷無效。（比 timestamp 更昂貴，但更改的頻率較低）。
?timestamp?：比較時間戳以確定無效。

resolve

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

解析請求的快照。

?hash?：比較內(nèi)容哈希以判斷無效。（比 timestamp 更昂貴，但更改的頻率較低）。
?timestamp?：比較時間戳以確定無效。

resolveBuildDependencies

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

使用持久緩存時用于解析構(gòu)建依賴項的快照。

?hash?：比較內(nèi)容哈希以判斷無效。（比 timestamp 更昂貴，但更改的頻率較低）。
?timestamp?：比較時間戳以確定無效。

Webpack 其它選項

amd

bail

dependencies

ignoreWarnings

infrastructureLogging

appendOnly

colors

console

debug

level

stream

loader

name

parallelism

profile

recordsInputPath

recordsOutputPath

recordsPath

snapshot

buildDependencies

immutablePaths

managedPaths

managedPaths

module

resolve

resolveBuildDependencies

Further Reading