统计信息(stats)

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

对于 webpack-dev-server,这个属性要放在 devServer 对象里。

在使用 Node.js API 时,此选项无效。

stats

object string

有一些预设选项,可作为快捷方式。像这样使用它们:

  1. module.exports = {
  2. //...
  3. stats: 'errors-only'
  4. };

Preset

Alternative

Description

Preset

"errors-only"

Alternative

none

Description

只在发生错误时输出

Preset

"minimal"

Alternative

none

Description

只在发生错误或有新的编译时输出

Preset

"none"

Alternative

false

Description

没有输出

Preset

"normal"

Alternative

true

Description

标准输出

Preset

"verbose"

Alternative

none

Description

全部输出

对于更加精细的控制,下列这些选项可以准确地控制并展示你想要的信息。请注意,此对象中的所有选项都是可选的。

  1. module.exports = {
  2. //...
  3. stats: {
  4. // 未定义选项时,stats 选项的备用值(fallback value)(优先级高于 webpack 本地默认值)
  5. all: undefined,
  6. // 添加资源信息
  7. assets: true,
  8. // 对资源按指定的字段进行排序
  9. // 你可以使用 `!field` 来反转排序。
  10. // Some possible values: 'id' (default), 'name', 'size', 'chunks', 'failed', 'issuer'
  11. // For a complete list of fields see the bottom of the page
  12. assetsSort: "field",
  13. // 添加构建日期和构建时间信息
  14. builtAt: true,
  15. // 添加缓存(但未构建)模块的信息
  16. cached: true,
  17. // 显示缓存的资源(将其设置为 `false` 则仅显示输出的文件)
  18. cachedAssets: true,
  19. // 添加 children 信息
  20. children: true,
  21. // 添加 chunk 信息(设置为 `false` 能允许较少的冗长输出)
  22. chunks: true,
  23. // 添加 namedChunkGroups 信息
  24. chunkGroups: true,
  25. // 将构建模块信息添加到 chunk 信息
  26. chunkModules: true,
  27. // 添加 chunk 和 chunk merge 来源的信息
  28. chunkOrigins: true,
  29. // 按指定的字段,对 chunk 进行排序
  30. // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
  31. // Some other possible values: 'name', 'size', 'chunks', 'failed', 'issuer'
  32. // For a complete list of fields see the bottom of the page
  33. chunksSort: "field",
  34. // 用于缩短 request 的上下文目录
  35. context: "../src/",
  36. // `webpack --colors` 等同于
  37. colors: false,
  38. // 显示每个模块到入口起点的距离(distance)
  39. depth: false,
  40. // 通过对应的 bundle 显示入口起点
  41. entrypoints: false,
  42. // 添加 --env information
  43. env: false,
  44. // 添加错误信息
  45. errors: true,
  46. // 添加错误的详细信息(就像解析日志一样)
  47. errorDetails: true,
  48. // 将资源显示在 stats 中的情况排除
  49. // 这可以通过 String, RegExp, 获取 assetName 的函数来实现
  50. // 并返回一个布尔值或如下所述的数组。
  51. excludeAssets: "filter" | /filter/ | (assetName) => true | false |
  52. ["filter"] | [/filter/] | [(assetName) => true|false],
  53. // 将模块显示在 stats 中的情况排除
  54. // 这可以通过 String, RegExp, 获取 moduleSource 的函数来实现
  55. // 并返回一个布尔值或如下所述的数组。
  56. excludeModules: "filter" | /filter/ | (moduleSource) => true | false |
  57. ["filter"] | [/filter/] | [(moduleSource) => true|false],
  58. // 查看 excludeModules
  59. exclude: "filter" | /filter/ | (moduleSource) => true | false |
  60. ["filter"] | [/filter/] | [(moduleSource) => true|false],
  61. // 添加 compilation 的哈希值
  62. hash: true,
  63. // 设置要显示的模块的最大数量
  64. maxModules: 15,
  65. // 添加构建模块信息
  66. modules: true,
  67. // 按指定的字段,对模块进行排序
  68. // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
  69. // Some other possible values: 'name', 'size', 'chunks', 'failed', 'issuer'
  70. // For a complete list of fields see the bottom of the page
  71. modulesSort: "field",
  72. // 显示警告/错误的依赖和来源(从 webpack 2.5.0 开始)
  73. moduleTrace: true,
  74. // 当文件大小超过 `performance.maxAssetSize` 时显示性能提示
  75. performance: true,
  76. // 显示模块的导出
  77. providedExports: false,
  78. // 添加 public path 的信息
  79. publicPath: true,
  80. // 添加模块被引入的原因
  81. reasons: true,
  82. // 添加模块的源码
  83. source: false,
  84. // 添加时间信息
  85. timings: true,
  86. // 显示哪个模块导出被用到
  87. usedExports: false,
  88. // 添加 webpack 版本信息
  89. version: true,
  90. // 添加警告
  91. warnings: true,
  92. // 过滤警告显示(从 webpack 2.4.0 开始),
  93. // 可以是 String, Regexp, 一个获取 warning 的函数
  94. // 并返回一个布尔值或上述组合的数组。第一个匹配到的为胜(First match wins.)。
  95. warningsFilter: "filter" | /filter/ | ["filter", /filter/] | (warning) => true|false
  96. }
  97. }

If you want to use one of the pre-defined behaviours e.g. 'minimal' but still override one or more of the rules, see the source code. You would want to copy the configuration options from case 'minimal': ... and add your additional rules while providing an object to stats.

webpack.config.js

  1. module.exports = {
  2. //..
  3. stats: {
  4. // copied from `'minimal'`
  5. all: false,
  6. modules: true,
  7. maxModules: 0,
  8. errors: true,
  9. warnings: true,
  10. // our additional options
  11. moduleTrace: true,
  12. errorDetails: true
  13. }
  14. };

Sorting fields

For assetsSort, chunksSort and moduleSort there are several possible fields that you can sort items by:

  • id is the item’s id;
  • name - a item’s name that was assigned to it upon importing;
  • size - a size of item in bytes;
  • chunks - what chunks the item originates from (for example, if there are multiple subchunks for one chunk - the subchunks will be grouped together according to their main chunk);
  • errors - amount of errors in items;
  • warnings - amount of warnings in items;
  • failed - whether the item has failed compilation;
  • cacheable - whether the item is cacheable;
  • built - whether the asset has been built;
  • prefetched - whether the asset will be prefetched;
  • optional - whether the asset is optional;
  • identifier - identifier of the item;
  • index - item’s processing index;
  • index2
  • profile
  • issuer - an identifier of the issuer;
  • issuerId - an id of the issuer;
  • issuerName - a name of the issuer;
  • issuerPath - a full issuer object. There’s no real need to sort by this field;

Colors

You can specify your own terminal output colors using ANSI escape sequences

  1. module.exports = {
  2. //...
  3. colors: {
  4. green: '\u001b[32m',
  5. },
  6. };

贡献人员

EugeneHlushko EugeneHlushko Raiondesu Raiondesu SpaceK33z SpaceK33z byzyk byzyk grgur grgur jasonblanchard jasonblanchard jungomi jungomi ldrick ldrick renjithvk renjithvk sallar sallar