Webpack Stats 对象

​object​ ​string​

stats 选项让你更精确地控制 bundle 信息该怎么显示。 如果你不希望使用 quiet 或 noInfo 这样的不显示信息，而是又不想得到全部的信息，只是想要获取某部分 bundle 的信息，使用 stats 选项是比较好的折衷方式。

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

Stats Presets

webpack 有一些特定的预设选项给统计信息输出：

Stats

你可以在统计输出里指定你想看到的信息。

stats.all

当统计信息配置没被定义，则该值是一个回退值。它的优先级比本地的 webpack 默认值高。

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

stats.assets

​boolean = true​

告知 stats 是否展示资源信息。将 stats.assets 设置成 false 会禁用.

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

stats.assetsSort

​string = id​

告知 stats 基于给定的字段对资源进行排序。所有的 排序字段都被允许作为 stats.assetsSort的值。使用 ! 作为值的前缀以反转基于给定字段的排序结果。

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

stats.builtAt

​boolean = true​

告知 stats 是否添加构建日期与时间信息。将 stats.builtAt 设置成 false 来隐藏.

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

stats.moduleAssets

​boolean = true​

告知 stats 是否添加模块内的资源信息。将 stats.moduleAssets 设置成 false 以隐藏。

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

stats.assetsSpace

​number = 15​

告诉 stats 应该显示多少个 asset 项目（将以组的方式折叠，以适应这个空间）。

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

stats.modulesSpace

​number = 15​

告诉 stats 应该显示多少个模块项目（将以组的方式折叠，以适应这个空间）。

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

stats.chunkModulesSpace

​number = 10​

告诉 stats 显示多少个 chunk 模块项目（将以组的方式折叠，以适应这个空间）。

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

stats.nestedModules

​boolean​

告知 stats 是否添加嵌套在其他模块中的模块信息（比如模块联邦）。

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

stats.nestedModulesSpace

​number = 10​

告诉 stats 应该显示多少个嵌套模块的项目（将以组的方式折叠，以适应这个空间）。

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

stats.cached

旧版的 stats.cachedModules.

stats.cachedModules

​boolean = true​

告诉 stats 是否要缓存（非内置）模块的信息。

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

stats.runtimeModules

​boolean = true​

告诉 stats 是否要添加运行时模块的信息。

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

stats.dependentModules

​boolean​

告诉 stats 是否要展示该 chunk 依赖的其他模块的 chunk 模块。

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

stats.groupAssetsByChunk

​boolean​

告诉 stats 是否按照 asset 与 chunk 的关系进行分组。

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

stats.groupAssetsByEmitStatus

​boolean​

告诉 stats 是否按照 asset 的状态进行分组（emitted，对比 emit 或缓存）.

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

stats.groupAssetsByExtension

​boolean​

告诉 stats 是否根据它们的拓展名聚合静态资源。

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

stats.groupAssetsByInfo

​boolean​

告诉 stats 是否按照 asset 信息对 asset 进行分组（immutable，development。hotModuleReplacement 等）。

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

stats.groupAssetsByPath

​boolean​

告诉 stats 是否根据它们的路径聚合静态资源。

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

stats.groupModulesByAttributes

​boolean​

告诉 stats 是否按模块的属性进行分组（errors，warnings，assets，optional，orphan 或者 dependent）。

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

stats.groupModulesByCacheStatus

​boolean​

告诉 stats 是否按模块的缓存状态进行分组（已缓存或者已构建并且可缓存）。

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

stats.groupModulesByExtension

​boolean​

告诉 stats 是否按模块的拓展名进行分组。

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

stats.groupModulesByLayer

​boolean​

告诉 stats 是否按模块的 layer 进行分组。

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

stats.groupModulesByPath

​boolean​

告诉 stats 是否按模块的路径进行分组。

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

stats.groupModulesByType

​boolean​

告诉 stats 是否按模块的类型进行分组。

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

stats.groupReasonsByOrigin

​boolean​

5.46.0+

按照原始模块对原因进行分组，以避免出现大量的原因集合。

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

stats.cachedAssets

​boolean = true​

告知 stats 是否添加关于缓存资源的信息。 将 stats.cachedAssets 设置成 false 会告知 stats 仅展示被生成的文件 (并非被构建的模块)。

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

stats.children

​boolean = true​

告知 stats 是否添加关于子模块的信息。

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

stats.chunks

​boolean = true​

告知 stats 是否添加关于 chunk 的信息。 将 stats.chunks 设置为 false 会引发更少的输出。

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

stats.chunkGroups

​boolean = true​

告知 stats 是否添加关于 namedChunkGroups 的信息。

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

stats.chunkModules

​boolean = true​

告知 stats 是否添加关于已构建模块和关于 chunk 的信息。

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

stats.chunkOrigins

​boolean = true​

告知 stats 是不添加关于 chunks 的来源和 chunk 合并的信息。

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

stats.chunksSort

​string = id​

告知 stats 基于给定的字段给 chunks 排序。所有 排序字段 都被允许用于作为 stats.chunksSort 的值。使用 ! 作为值里的前缀用以将基于给定字段排序的结果反转。

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

stats.context

​string​

stats 的基本目录，用来缩短请求信息的 绝对路径。

const path = require(path);

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

默认情况下，context 的值是 Node.js 的当前工作目录。

stats.colors

​boolean = false​ ​object​

告知 stats 是否输出不同的颜色。

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

它也可用通过命令行的参数实现：

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 是否展示每个模块与入口文件的距离。

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

stats.entrypoints

​boolean = true​ ​string = auto​

告知 stats 是否展示入口文件与对应的文件 bundles。

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

当 stats.entrypoints 被设置为 auto 时，webpack 将自动决定是否在 stats 输出中展示入口信息。

stats.env

​boolean = false​

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

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

stats.orphanModules

​boolean = false​

告知 stats 是否隐藏 孤儿(orphan) 模块. 一个模块属于 孤儿(orphan) 如果它不被包含在任何一个 chunk 里。孤儿模块默认在 stats 中会被隐藏。

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

stats.errors

​boolean = true​

告知 stats 是否展示错误。

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

stats.errorDetails

​boolean​ ​string = "auto"​

告知 stats 是否添加错误的详情。如果默认值为 auto，当只有 2 个或更少的错误时，它将显示错误详情。

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

stats.errorStack

​boolean = true​

告知 stats 是否展示错位的栈追踪信息。

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

stats.excludeAssets

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

告知 stats 排除掉匹配的资源信息。这个可以通过设置一个 字符串, 一个 正则表达式, 一个 函数 取得资源的名字作为入参且返回一个 布尔值。 stats.excludeAssets 可以是一个包括上面任意一类型值的 数组 。

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 排除掉匹配的资源信息。这个可以通过设置一个 字符串, 一个 正则表达式, 一个 函数 取得资源的名字作为入参且返回一个 布尔值。 stats.excludeModules 可以是一个包括上面任意一类型值的 数组 。stats.excludeModules 会与 stats.exclude 的配置值进行合并。

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

将 stats.excludeModules 设置为 false 会禁用以上的排除行为。

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

stats.exclude

详参 stats.excludeModules.

stats.hash

​boolean = true​

告知 stats 是否添加关于编译哈希值的信息。

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

stats.logging

​string = info: none | error | warn | info | log | verbose boolean​

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

• ​none​, false – 禁用日志
• ​error​ – 仅显示错误
• ​warn​ – 仅显示错误与告警
• ​info​ – 显示错误，告警与信息
• ​log​, true – 显示错误，告警与信息，日志，组别，清理。折叠组别会在折叠状态中被显示 。
• ​verbose​ – 输出所有日志除了调试与追踪。 折叠组别会在扩展状态中被显示 。

module.exports = {
  //...
  stats: {
    logging: verbose,
  },
};

stats.loggingDebug

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

告知 stats 去包括特定的日志工具调试信息比如插件或加载器的日志工具。当 stats.logging 被设置为 false, stats.loggingDebug 配置会被忽略。

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

stats.loggingTrace

​boolean = true​

启用错误，告警与追踪的日志输出中的堆栈追踪。将 stats.loggingTrace 设置为 false 隐藏追踪。

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

stats.modules

​boolean = true​

告知 stats 是否添加关于构建模块的信息。

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

stats.modulesSort

​string = id​

告知 stats 基于给定的字段对资源进行排序。所有的 排序字段都被允许作为 stats.modulesSort的值。使用 ! 作为值的前缀以反转基于给定字段的排序结果。

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

stats.moduleTrace

​boolean = true​

告知 stats 展示依赖和告警/错误的来源。stats.moduleTrace 从 webpack 2.5.0 起可用。

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

stats.optimizationBailout

​boolean​

告诉 stats 展示模块优化失效的原因。

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

stats.outputPath

​boolean = true​

告知 stats 展示 outputPath.

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

stats.performance

​boolean = true​

告知 stats 当文件大小超过 performance.maxAssetSize配置值时，展示性能提性。

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

stats.preset

​string boolean: false​

为展示的信息类型设置 预设值。这对扩展统计信息行为非常有用。

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

将 stats.preset 的值设置为false 告知 webpack 使用 none 统计信息预设值。

stats.providedExports

​boolean = false​

告知 stats 去展示模块的导出。

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

stats.errorsCount

​boolean = true​

添加展示 errors 个数。

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

stats.warningsCount

​boolean = true​

添加展示 warnings 个数。

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

stats.publicPath

​boolean = true​

告知 stats 展示 publicPath。

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

stats.reasons

​boolean = true​

告知 stats 添加关于模块被引用的原因信息。

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

stats.reasonsSpace

​number​

5.46.0+

用于显示原因的空间（分组将被折叠以适应此空间）。

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

stats.relatedAssets

​boolean = false​

告诉 stats 是否需添加与其他 assets 相关的信息（例如 assets 的 SourceMaps）。

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

stats.source

​boolean = false​

告知 stats 去添加模块的源码。

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

stats.timings

​boolean = true​

告知 stats 添加时间信息。

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

stats.ids

​boolean = false​

通知 stats 给 module 和 chunk 添加 id。

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

stats.usedExports

​boolean = false​

告知 stats 是否展示模块用了哪些导出。

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

stats.version

​boolean = true​

告知 stats 添加关于 webpack 版本的信息。

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

stats.chunkGroupAuxiliary

​boolean = true​

在 chunk 组中展示辅助 asset。

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

stats.chunkGroupChildren

​boolean = true​

显示 chunk 组的子 chunk。（例如，预置（prefetched），预加载（preloaded）的 chunk 和 asset)。

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

stats.chunkGroupMaxAssets

​number​

chunk 组中的 asset 数上限。

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 排除掉匹配的告警信息。这个可以通过设置一个 字符串, 一个 正则表达式, 一个 函数 取得资源的名字作为入参且返回一个 布尔值。 stats.warningsFilter 可以是一个包括上面任意一类型值的 数组 。

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

stats.chunkRelations

​boolean = false​

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

字段排序

对于 assetsSort, chunksSort 和 modulesSort 它们有几个可用的字段用于排序：

• ​id​ 是元素（指资源，chunk 或模块，下同）的 id;
• ​name​ – 一个元素的名字，在导引的时候被分配；
• ​size​ – 一个元素的大小，单位字节（bytes）;
• ​chunks​ – 元素来源于哪些 chunks (例如，一个 chunk 有多个子 chunks， – 子 chunks 会被基于主 chunk 组合到一起);
• ​errors​ – 元素组错误的数量;
• ​warnings​ – 元素中告警的数量;
• ​failed​ – 元素是被编译失败;
• ​cacheable​ – 元素是否被缓存;
• ​built​ – 资源是否被构建;
• ​prefetched​ – 资源是否被预拉取;
• ​optional​ – 资源是否可选;
• ​identifier​ – 元素的标识符;
• ​index​ – 元素加工指针;
• ​index2​
• ​profile​
• ​issuer​ – 发起者(issuer)的标识符;
• ​issuerId​ – 发起者(issuer)的 id;
• ​issuerName​ – 发起者(issuer)的名字;
• ​issuerPath​ – 一个完整的发起者(issuer)对象。基于这个字段排序没有现实的需要;

扩展统计信息行为

如果你想使用其中一个预定义的行为，例如 minimal，但仍想重载一个或更多的规则：请指定想要设置的 stats.preset 同时在后面添加自定义或额外的规则。

webpack.config.js

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