Webpack Stats 對(duì)象

2023-05-16 17:18 更新

?object? ?string?

stats 選項(xiàng)讓你更精確地控制 bundle 信息該怎么顯示。 如果你不希望使用 quiet 或 noInfo 這樣的不顯示信息，而是又不想得到全部的信息，只是想要獲取某部分 bundle 的信息，使用 stats 選項(xiàng)是比較好的折衷方式。

module.exports = {
  //...
  stats: 'errors-only',
};

Stats Presets

webpack 有一些特定的預(yù)設(shè)選項(xiàng)給統(tǒng)計(jì)信息輸出：

預(yù)設(shè) 可選值 描述
'errors-only' none 只在發(fā)生錯(cuò)誤時(shí)輸出
'errors-warnings' none 只在發(fā)生錯(cuò)誤或有警告時(shí)輸出
'minimal' none 只在發(fā)生錯(cuò)誤或新的編譯開始時(shí)輸出
'none' false 沒有輸出
'normal' true 標(biāo)準(zhǔn)輸出
'verbose' none 全部輸出
'detailed' none 全部輸出除了 chunkModules 和 chunkRootModules
'summary' none 輸出 webpack 版本，以及警告數(shù)和錯(cuò)誤數(shù)

Stats

你可以在統(tǒng)計(jì)輸出里指定你想看到的信息。

stats.all

當(dāng)統(tǒng)計(jì)信息配置沒被定義，則該值是一個(gè)回退值。它的優(yōu)先級(jí)比本地的 webpack 默認(rèn)值高。

module.exports = {
  //...
  stats: {
    all: undefined,
  },
};

stats.assets

?boolean = true?

告知 stats 是否展示資源信息。將 stats.assets 設(shè)置成 false 會(huì)禁用.

module.exports = {
  //...
  stats: {
    assets: false,
  },
};

stats.assetsSort

?string = 'id'?

告知 stats 基于給定的字段對(duì)資源進(jìn)行排序。所有的 排序字段都被允許作為 stats.assetsSort的值。使用 ! 作為值的前綴以反轉(zhuǎn)基于給定字段的排序結(jié)果。

module.exports = {
  //...
  stats: {
    assetsSort: '!size',
  },
};

stats.builtAt

?boolean = true?

告知 stats 是否添加構(gòu)建日期與時(shí)間信息。將 stats.builtAt 設(shè)置成 false 來隱藏.

module.exports = {
  //...
  stats: {
    builtAt: false,
  },
};

stats.moduleAssets

?boolean = true?

告知 stats 是否添加模塊內(nèi)的資源信息。將 stats.moduleAssets 設(shè)置成 false 以隱藏。

module.exports = {
  //...
  stats: {
    moduleAssets: false,
  },
};

stats.assetsSpace

?number = 15?

告訴 stats 應(yīng)該顯示多少個(gè) asset 項(xiàng)目（將以組的方式折疊，以適應(yīng)這個(gè)空間）。

module.exports = {
  //...
  stats: {
    assetsSpace: 15,
  },
};

stats.modulesSpace

?number = 15?

告訴 stats 應(yīng)該顯示多少個(gè)模塊項(xiàng)目（將以組的方式折疊，以適應(yīng)這個(gè)空間）。

module.exports = {
  //...
  stats: {
    modulesSpace: 15,
  },
};

stats.chunkModulesSpace

?number = 10?

告訴 stats 顯示多少個(gè) chunk 模塊項(xiàng)目（將以組的方式折疊，以適應(yīng)這個(gè)空間）。

module.exports = {
  //...
  stats: {
    chunkModulesSpace: 15,
  },
};

stats.nestedModules

?boolean?

告知 stats 是否添加嵌套在其他模塊中的模塊信息（比如模塊聯(lián)邦）。

module.exports = {
  //...
  stats: {
    nestedModules: true,
  },
};

stats.nestedModulesSpace

?number = 10?

告訴 stats 應(yīng)該顯示多少個(gè)嵌套模塊的項(xiàng)目（將以組的方式折疊，以適應(yīng)這個(gè)空間）。

module.exports = {
  //...
  stats: {
    nestedModulesSpace: 15,
  },
};

stats.cached

舊版的 stats.cachedModules.

stats.cachedModules

?boolean = true?

告訴 stats 是否要緩存（非內(nèi)置）模塊的信息。

module.exports = {
  //...
  stats: {
    cachedModules: false,
  },
};

stats.runtimeModules

?boolean = true?

告訴 stats 是否要添加運(yùn)行時(shí)模塊的信息。

module.exports = {
  //...
  stats: {
    runtimeModules: false,
  },
};

stats.dependentModules

?boolean?

告訴 stats 是否要展示該 chunk 依賴的其他模塊的 chunk 模塊。

module.exports = {
  //...
  stats: {
    dependentModules: false,
  },
};

stats.groupAssetsByChunk

?boolean?

告訴 stats 是否按照 asset 與 chunk 的關(guān)系進(jìn)行分組。

module.exports = {
  //...
  stats: {
    groupAssetsByChunk: false,
  },
};

stats.groupAssetsByEmitStatus

?boolean?

告訴 stats 是否按照 asset 的狀態(tài)進(jìn)行分組（emitted，對(duì)比 emit 或緩存）.

module.exports = {
  //...
  stats: {
    groupAssetsByEmitStatus: false,
  },
};

stats.groupAssetsByExtension

?boolean?

告訴 stats 是否根據(jù)它們的拓展名聚合靜態(tài)資源。

module.exports = {
  //...
  stats: {
    groupAssetsByExtension: false,
  },
};

stats.groupAssetsByInfo

?boolean?

告訴 stats 是否按照 asset 信息對(duì) asset 進(jìn)行分組（immutable，development。hotModuleReplacement 等）。

module.exports = {
  //...
  stats: {
    groupAssetsByInfo: false,
  },
};

stats.groupAssetsByPath

?boolean?

告訴 stats 是否根據(jù)它們的路徑聚合靜態(tài)資源。

module.exports = {
  //...
  stats: {
    groupAssetsByPath: false,
  },
};

stats.groupModulesByAttributes

?boolean?

告訴 stats 是否按模塊的屬性進(jìn)行分組（errors，warnings，assets，optional，orphan 或者 dependent）。

module.exports = {
  //...
  stats: {
    groupModulesByAttributes: false,
  },
};

stats.groupModulesByCacheStatus

?boolean?

告訴 stats 是否按模塊的緩存狀態(tài)進(jìn)行分組（已緩存或者已構(gòu)建并且可緩存）。

module.exports = {
  //...
  stats: {
    groupModulesByCacheStatus: true,
  },
};

stats.groupModulesByExtension

?boolean?

告訴 stats 是否按模塊的拓展名進(jìn)行分組。

module.exports = {
  //...
  stats: {
    groupModulesByExtension: true,
  },
};

stats.groupModulesByLayer

?boolean?

告訴 stats 是否按模塊的 layer 進(jìn)行分組。

module.exports = {
  //...
  stats: {
    groupModulesByLayer: true,
  },
};

stats.groupModulesByPath

?boolean?

告訴 stats 是否按模塊的路徑進(jìn)行分組。

module.exports = {
  //...
  stats: {
    groupModulesByPath: true,
  },
};

stats.groupModulesByType

?boolean?

告訴 stats 是否按模塊的類型進(jìn)行分組。

module.exports = {
  //...
  stats: {
    groupModulesByType: true,
  },
};

stats.groupReasonsByOrigin

?boolean?

5.46.0+

按照原始模塊對(duì)原因進(jìn)行分組，以避免出現(xiàn)大量的原因集合。 

module.exports = {
  //...
  stats: {
    groupReasonsByOrigin: true,
  },
};

stats.cachedAssets

?boolean = true?

告知 stats 是否添加關(guān)于緩存資源的信息。 將 stats.cachedAssets 設(shè)置成 false 會(huì)告知 stats 僅展示被生成的文件 (并非被構(gòu)建的模塊)。

module.exports = {
  //...
  stats: {
    cachedAssets: false,
  },
};

stats.children

?boolean = true?

告知 stats 是否添加關(guān)于子模塊的信息。

module.exports = {
  //...
  stats: {
    children: false,
  },
};

stats.chunks

?boolean = true?

告知 stats 是否添加關(guān)于 chunk 的信息。 將 stats.chunks 設(shè)置為 false 會(huì)引發(fā)更少的輸出。

module.exports = {
  //...
  stats: {
    chunks: false,
  },
};

stats.chunkGroups

?boolean = true?

告知 stats 是否添加關(guān)于 namedChunkGroups 的信息。

module.exports = {
  //...
  stats: {
    chunkGroups: false,
  },
};

stats.chunkModules

?boolean = true?

告知 stats 是否添加關(guān)于已構(gòu)建模塊和關(guān)于 chunk 的信息。

module.exports = {
  //...
  stats: {
    chunkModules: false,
  },
};

stats.chunkOrigins

?boolean = true?

告知 stats 是不添加關(guān)于 chunks 的來源和 chunk 合并的信息。

module.exports = {
  //...
  stats: {
    chunkOrigins: false,
  },
};

stats.chunksSort

?string = 'id'?

告知 stats 基于給定的字段給 chunks 排序。所有 排序字段 都被允許用于作為 stats.chunksSort 的值。使用 ! 作為值里的前綴用以將基于給定字段排序的結(jié)果反轉(zhuǎn)。

module.exports = {
  //...
  stats: {
    chunksSort: 'name',
  },
};

stats.context

?string?

stats 的基本目錄，用來縮短請(qǐng)求信息的 絕對(duì)路徑。

const path = require('path');

module.exports = {
  //...
  stats: {
    context: path.resolve(__dirname, 'src/components'),
  },
};

默認(rèn)情況下，context 的值是 Node.js 的當(dāng)前工作目錄。

stats.colors

?boolean = false? ?object?

告知 stats 是否輸出不同的顏色。

module.exports = {
  //...
  stats: {
    colors: true,
  },
};

它也可用通過命令行的參數(shù)實(shí)現(xiàn)：

npx webpack --stats-colors

To disable:

npx webpack --no-stats-colors

你可以通過使用 ANSI escape sequences 指定你自己的命令行終端顏色。

module.exports = {
  //...
  colors: {
    green: '\u001b[32m',
  },
};

stats.depth

?boolean = false?

告知 stats 是否展示每個(gè)模塊與入口文件的距離。

module.exports = {
  //...
  stats: {
    depth: true,
  },
};

stats.entrypoints

?boolean = true? ?string = 'auto'?

告知 stats 是否展示入口文件與對(duì)應(yīng)的文件 bundles。

module.exports = {
  //...
  stats: {
    entrypoints: false,
  },
};

當(dāng) stats.entrypoints 被設(shè)置為 'auto' 時(shí)，webpack 將自動(dòng)決定是否在 stats 輸出中展示入口信息。

stats.env

?boolean = false?

告知 stats 是否展示 --env 信息.

module.exports = {
  //...
  stats: {
    env: true,
  },
};

stats.orphanModules

?boolean = false?

告知 stats 是否隱藏 孤兒(orphan) 模塊. 一個(gè)模塊屬于 孤兒(orphan) 如果它不被包含在任何一個(gè) chunk 里。孤兒模塊默認(rèn)在 stats 中會(huì)被隱藏。

module.exports = {
  //...
  stats: {
    orphanModules: true,
  },
};

stats.errors

?boolean = true?

告知 stats 是否展示錯(cuò)誤。

module.exports = {
  //...
  stats: {
    errors: false,
  },
};

stats.errorDetails

?boolean? ?string = "auto"?

告知 stats 是否添加錯(cuò)誤的詳情。如果默認(rèn)值為 'auto'，當(dāng)只有 2 個(gè)或更少的錯(cuò)誤時(shí)，它將顯示錯(cuò)誤詳情。

module.exports = {
  //...
  stats: {
    errorDetails: false,
  },
};

stats.errorStack

?boolean = true?

告知 stats 是否展示錯(cuò)位的棧追蹤信息。

module.exports = {
  //...
  stats: {
    errorStack: false,
  },
};

stats.excludeAssets

?array = []: string | RegExp | function (assetName) => boolean? ?string? ?RegExp? ?function (assetName) => boolean?

告知 stats 排除掉匹配的資源信息。這個(gè)可以通過設(shè)置一個(gè) 字符串, 一個(gè) 正則表達(dá)式, 一個(gè) 函數(shù) 取得資源的名字作為入?yún)⑶曳祷匾粋€(gè) 布爾值。 stats.excludeAssets 可以是一個(gè)包括上面任意一類型值的 數(shù)組 。

module.exports = {
  //...
  stats: {
    excludeAssets: [
      'filter',
      /filter/,
      (assetName) => assetName.contains('moduleA'),
    ],
  },
};

stats.excludeModules

?array = []: string | RegExp | function (assetName) => boolean? ?string? ?RegExp? ?function (assetName) => boolean? ?boolean: false?

告知 stats 排除掉匹配的資源信息。這個(gè)可以通過設(shè)置一個(gè) 字符串, 一個(gè) 正則表達(dá)式, 一個(gè) 函數(shù) 取得資源的名字作為入?yún)⑶曳祷匾粋€(gè) 布爾值。 stats.excludeModules 可以是一個(gè)包括上面任意一類型值的 數(shù)組 。stats.excludeModules 會(huì)與 stats.exclude 的配置值進(jìn)行合并。

module.exports = {
  //...
  stats: {
    excludeModules: ['filter', /filter/, (moduleSource) => true],
  },
};

將 stats.excludeModules 設(shè)置為 false 會(huì)禁用以上的排除行為。

module.exports = {
  //...
  stats: {
    excludeModules: false,
  },
};

stats.exclude

詳參 stats.excludeModules.

stats.hash

?boolean = true?

告知 stats 是否添加關(guān)于編譯哈希值的信息。

module.exports = {
  //...
  stats: {
    hash: false,
  },
};

stats.logging

?string = 'info': 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose' boolean?

告知 stats 是否添加日志輸出。

  • ?'none'?, false - 禁用日志
  • ?'error'? - 僅顯示錯(cuò)誤
  • ?'warn'? - 僅顯示錯(cuò)誤與告警
  • ?'info'? - 顯示錯(cuò)誤，告警與信息
  • ?'log'?, true - 顯示錯(cuò)誤，告警與信息，日志，組別，清理。折疊組別會(huì)在折疊狀態(tài)中被顯示 。
  • ?'verbose'? - 輸出所有日志除了調(diào)試與追蹤。 折疊組別會(huì)在擴(kuò)展?fàn)顟B(tài)中被顯示 。
module.exports = {
  //...
  stats: {
    logging: 'verbose',
  },
};

stats.loggingDebug

?array = []: string | RegExp | function (name) => boolean? ?string? ?RegExp function (name) => boolean?

告知 stats 去包括特定的日志工具調(diào)試信息比如插件或加載器的日志工具。當(dāng) stats.logging 被設(shè)置為 false, stats.loggingDebug 配置會(huì)被忽略。

module.exports = {
  //...
  stats: {
    loggingDebug: [
      'MyPlugin',
      /MyPlugin/,
      /webpack/, // To get core logging
      (name) => name.contains('MyPlugin'),
    ],
  },
};

stats.loggingTrace

?boolean = true?

啟用錯(cuò)誤，告警與追蹤的日志輸出中的堆棧追蹤。將 stats.loggingTrace 設(shè)置為 false 隱藏追蹤。

module.exports = {
  //...
  stats: {
    loggingTrace: false,
  },
};

stats.modules

?boolean = true?

告知 stats 是否添加關(guān)于構(gòu)建模塊的信息。

module.exports = {
  //...
  stats: {
    modules: false,
  },
};

stats.modulesSort

?string = 'id'?

告知 stats 基于給定的字段對(duì)資源進(jìn)行排序。所有的 排序字段都被允許作為 stats.modulesSort的值。使用 ! 作為值的前綴以反轉(zhuǎn)基于給定字段的排序結(jié)果。

module.exports = {
  //...
  stats: {
    modulesSort: 'size',
  },
};

stats.moduleTrace

?boolean = true?

告知 stats 展示依賴和告警/錯(cuò)誤的來源。stats.moduleTrace 從 webpack 2.5.0 起可用。

module.exports = {
  //...
  stats: {
    moduleTrace: false,
  },
};

stats.optimizationBailout

?boolean?

告訴 stats 展示模塊優(yōu)化失效的原因。

module.exports = {
  //...
  stats: {
    optimizationBailout: false,
  },
};

stats.outputPath

?boolean = true?

告知 stats 展示 outputPath.

module.exports = {
  //...
  stats: {
    outputPath: false,
  },
};

stats.performance

?boolean = true?

告知 stats 當(dāng)文件大小超過 performance.maxAssetSize配置值時(shí)，展示性能提性。

module.exports = {
  //...
  stats: {
    performance: false,
  },
};

stats.preset

?string boolean: false?

為展示的信息類型設(shè)置 預(yù)設(shè)值。這對(duì)擴(kuò)展統(tǒng)計(jì)信息行為非常有用。

module.exports = {
  //...
  stats: {
    preset: 'minimal',
  },
};

將 stats.preset 的值設(shè)置為false 告知 webpack 使用 'none' 統(tǒng)計(jì)信息預(yù)設(shè)值。

stats.providedExports

?boolean = false?

告知 stats 去展示模塊的導(dǎo)出。

module.exports = {
  //...
  stats: {
    providedExports: true,
  },
};

stats.errorsCount

?boolean = true?

添加展示 errors 個(gè)數(shù)。

module.exports = {
  //...
  stats: {
    errorsCount: false,
  },
};

stats.warningsCount

?boolean = true?

添加展示 warnings 個(gè)數(shù)。

module.exports = {
  //...
  stats: {
    warningsCount: false,
  },
};

stats.publicPath

?boolean = true?

告知 stats 展示 publicPath。

module.exports = {
  //...
  stats: {
    publicPath: false,
  },
};

stats.reasons

?boolean = true?

告知 stats 添加關(guān)于模塊被引用的原因信息。

module.exports = {
  //...
  stats: {
    reasons: false,
  },
};

stats.reasonsSpace

?number?

5.46.0+

用于顯示原因的空間（分組將被折疊以適應(yīng)此空間）。 

module.exports = {
  //...
  stats: {
    reasonsSpace: 1000,
  },
};

stats.relatedAssets

?boolean = false?

告訴 stats 是否需添加與其他 assets 相關(guān)的信息（例如 assets 的 SourceMaps）。

module.exports = {
  //...
  stats: {
    relatedAssets: true,
  },
};

stats.source

?boolean = false?

告知 stats 去添加模塊的源碼。

module.exports = {
  //...
  stats: {
    source: true,
  },
};

stats.timings

?boolean = true?

告知 stats 添加時(shí)間信息。

module.exports = {
  //...
  stats: {
    timings: false,
  },
};

stats.ids

?boolean = false?

通知 stats 給 module 和 chunk 添加 id。

module.exports = {
  //...
  stats: {
    ids: true,
  },
};

stats.usedExports

?boolean = false?

告知 stats 是否展示模塊用了哪些導(dǎo)出。

module.exports = {
  //...
  stats: {
    usedExports: true,
  },
};

stats.version

?boolean = true?

告知 stats 添加關(guān)于 webpack 版本的信息。

module.exports = {
  //...
  stats: {
    version: false,
  },
};

stats.chunkGroupAuxiliary

?boolean = true?

在 chunk 組中展示輔助 asset。

module.exports = {
  //...
  stats: {
    chunkGroupAuxiliary: false,
  },
};

stats.chunkGroupChildren

?boolean = true?

顯示 chunk 組的子 chunk。（例如，預(yù)置（prefetched），預(yù)加載（preloaded）的 chunk 和 asset)。

module.exports = {
  //...
  stats: {
    chunkGroupChildren: false,
  },
};

stats.chunkGroupMaxAssets

?number?

chunk 組中的 asset 數(shù)上限。

module.exports = {
  //...
  stats: {
    chunkGroupMaxAssets: 5,
  },
};

stats.warnings

?boolean = true?

告知 stats 添加告警。

module.exports = {
  //...
  stats: {
    warnings: false,
  },
};

stats.warningsFilter

?array = []: string | RegExp | function (warning) => boolean? ?string? ?RegExp? ?function (warning) => boolean?

告知 stats 排除掉匹配的告警信息。這個(gè)可以通過設(shè)置一個(gè) 字符串, 一個(gè) 正則表達(dá)式, 一個(gè) 函數(shù) 取得資源的名字作為入?yún)⑶曳祷匾粋€(gè) 布爾值。 stats.warningsFilter 可以是一個(gè)包括上面任意一類型值的 數(shù)組 。

module.exports = {
  //...
  stats: {
    warningsFilter: ['filter', /filter/, (warning) => true],
  },
};

stats.chunkRelations

?boolean = false?

告知 stats 展示 chunk 的父 chunk，孩子 chunk 和兄弟 chunk。

字段排序

對(duì)于 assetsSort, chunksSort 和 modulesSort 它們有幾個(gè)可用的字段用于排序：

  • ?'id'? 是元素（指資源，chunk 或模塊，下同）的 id;
  • ?'name'? - 一個(gè)元素的名字，在導(dǎo)引的時(shí)候被分配；
  • ?'size'? - 一個(gè)元素的大小，單位字節(jié)（bytes）;
  • ?'chunks'? - 元素來源于哪些 chunks (例如，一個(gè) chunk 有多個(gè)子 chunks， - 子 chunks 會(huì)被基于主 chunk 組合到一起);
  • ?'errors'? - 元素組錯(cuò)誤的數(shù)量;
  • ?'warnings'? - 元素中告警的數(shù)量;
  • ?'failed'? - 元素是被編譯失敗;
  • ?'cacheable'? - 元素是否被緩存;
  • ?'built'? - 資源是否被構(gòu)建;
  • ?'prefetched'? - 資源是否被預(yù)拉取;
  • ?'optional'? - 資源是否可選;
  • ?'identifier'? - 元素的標(biāo)識(shí)符;
  • ?'index'? - 元素加工指針;
  • ?'index2'?
  • ?'profile'?
  • ?'issuer'? - 發(fā)起者(issuer)的標(biāo)識(shí)符;
  • ?'issuerId'? - 發(fā)起者(issuer)的 id;
  • ?'issuerName'? - 發(fā)起者(issuer)的名字;
  • ?'issuerPath'? - 一個(gè)完整的發(fā)起者(issuer)對(duì)象?；谶@個(gè)字段排序沒有現(xiàn)實(shí)的需要;

擴(kuò)展統(tǒng)計(jì)信息行為

如果你想使用其中一個(gè)預(yù)定義的行為，例如 'minimal'，但仍想重載一個(gè)或更多的規(guī)則：請(qǐng)指定想要設(shè)置的 stats.preset 同時(shí)在后面添加自定義或額外的規(guī)則。

webpack.config.js 

module.exports = {
  //..
  stats: {
    preset: 'minimal',
    moduleTrace: true,
    errorDetails: true,
  },
};


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)