Webpack Stats 对象

object string

stats 选项让你更精确地控制 bundle 信息该怎么显示。如果你不希望使用 quiet 或 noInfo 这样的不显示信息，而是又不想得到全部的信息，只是想要获取某部分 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	全部输出除了 `chunkModules` 和 `chunkRootModules`
`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.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

告知 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,
  },
};

唐伯虎点蚊香

前端小白，想各位学习！

Next Webpack Node »

Previous « Webpack 实验特性(Experiments)

聊聊vue3中的defineProps

在Vue 3中，defineP…

1 周 ago

前端开发

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

2 周 ago

前端开发

自定义指令：聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 周 ago

前端开发

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

4 周 ago

前端开发

Nginx 基本操作：启动、停止、重启命令。

我们来学习Nginx基础操作：…

1 月 ago

前端开发

Vue3：手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

1 月 ago

Webpack Stats 对象

Stats Presets

Stats

stats.all

stats.assets

stats.assetsSort

stats.builtAt

stats.moduleAssets

stats.assetsSpace

stats.modulesSpace

stats.chunkModulesSpace

stats.nestedModules

stats.nestedModulesSpace

stats.cached

stats.cachedModules

stats.runtimeModules

stats.dependentModules

stats.groupAssetsByChunk

stats.groupAssetsByEmitStatus

stats.groupAssetsByExtension

stats.groupAssetsByInfo

stats.groupAssetsByPath

stats.groupModulesByAttributes

stats.groupModulesByCacheStatus

stats.groupModulesByExtension

stats.groupModulesByLayer

stats.groupModulesByPath

stats.groupModulesByType

stats.groupReasonsByOrigin

stats.cachedAssets

stats.children

stats.chunks

stats.chunkGroups

stats.chunkModules

stats.chunkOrigins

stats.chunksSort

stats.context

stats.colors

stats.depth

stats.entrypoints

stats.env

stats.orphanModules

stats.errors

stats.errorDetails

stats.errorStack

stats.excludeAssets

stats.excludeModules

stats.exclude

stats.hash

stats.logging

stats.loggingDebug

stats.loggingTrace

stats.modules

stats.modulesSort

stats.moduleTrace

stats.optimizationBailout

stats.outputPath

stats.performance

stats.preset

stats.providedExports

stats.errorsCount

stats.warningsCount

stats.publicPath

stats.reasons

stats.reasonsSpace

stats.relatedAssets

stats.source

stats.timings

stats.ids

stats.usedExports

stats.version

stats.chunkGroupAuxiliary

stats.chunkGroupChildren

stats.chunkGroupMaxAssets

stats.warnings

stats.warningsFilter

stats.chunkRelations

字段排序

扩展统计信息行为

Recent Posts