stats 对象

object string

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

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

Stats Presets

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

预设 可选值 描述
'errors-only' none 只在发生错误时输出
'errors-warnings' none 只在发生错误或有新的编译时输出
'minimal' none 只在发生错误或新的编译开始时输出
'none' false 没有输出
'normal' true 标准输出
'verbose' none 全部输出
'detailed' none 全部输出除了 chunkModuleschunkRootModules
'summary' none 输出 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.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.groupAssetsByInfo

boolean

告诉 stats 是否按照 asset 信息对 asset 进行分组(immutable,development。hotModuleReplacement 等)。

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

stats.groupModulesByAttributes

boolean

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

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

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 = '../src/'

设置上下文目录用以将文件请求信息变短。

module.exports = {
  //...
  stats: {
    context: '../src/components/',
  },
};

stats.colors

boolean = false object

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

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

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

webpack-cli --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.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.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, chunksSortmodulesSort 它们有几个可用的字段用于排序:

  • '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,
  },
};