webpack stats 配置指南：用 “summary“ 预设输出精简的构建摘要

webpack stats 配置指南用 summary 预设输出精简的构建摘要【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack本指南围绕 webpack 官方示例 examples/stats-summary 展开讲解如何通过stats: summary让构建终端只输出最精简的摘要信息。文章会从配置写法、运行结果出发深入 DefaultStatsPresetPlugin 与配置归一化链路说明 summary 预设内部究竟开启了哪些字段、与其他预设none / minimal / errors-warnings / normal / detailed / verbose的差异以及如何在对象模式下做细粒度定制。stats 输出级别与预设preset体系webpack 在每次编译结束后都会生成一份 stats统计报告用于在终端描述本次构建的结果。这份报告的控制项非常多资产、模块、chunk、错误与警告、日志等为了便于使用webpack 用预设把这些细粒度开关打包成若干档位。在配置校验 Schema 中stats字段被定义为StatsValue它可以是一个字符串预设名、一个布尔值或一个细粒度选项对象见 schemas/WebpackOptions.json字符串预设名none、summary、errors-only、errors-warnings、minimal、normal、detailed、verbose布尔值true/false对象直接传入StatsOptions中的任意字段做细粒度控制。这些预设的完整定义集中在 lib/stats/DefaultStatsPresetPlugin.js 的NAMED_PRESETS常量中下表整理了各档位对应的能力预设名核心语义典型输出none关闭全部输出all: false什么都不打印summary只保留版本号与错误/警告计数关闭全部细节webpack X.X.X compiled successfullyerrors-only只显示错误与错误堆栈/模块追踪日志仅 error 级无错误时几乎无输出出错时仅呈现错误errors-warnings在 errors-only 基础上额外输出警告干净构建时接近无输出minimal显示资产/模块的计数式摘要与错误警告1 asset/1 module/compiled successfullynormal默认档展示资产、模块、编译结果等常规信息带文件名的资产与模块清单detailed在 normal 基础上追加 chunk、模块深度、导出使用、日志等详细分块输出 LOG 分组verbose全量细节堆栈、日志 verbose、chunk 关系等最完整最啰嗦关于布尔值stats: true等价于normalstats: false等价于none这一映射可以在 lib/config/normalization.js 的 stats 归一化逻辑以及 lib/Compilation.js 的createStatsOptions中得到印证——false会被改写成{ preset: none }true改写成{ preset: normal }字符串则直接改写成{ preset: 字符串 }。用户不配置stats时输出形态约等于normal档由DEFAULTS中各字段在终端展示forToString上下文中的默认值决定见 lib/stats/DefaultStatsPresetPlugin.js。最小化配置启用 summary 输出examples/stats-summary 展示的就是最简单的一种 stats 自定义方式。入口文件 examples/stats-summary/example.js 内容非常朴素console.log(Hello World!);而其 webpack.config.js 也极其精简——除了输出目录与文件名外唯一的额外配置就是stats: summaryuse strict; const path require(path); /** type {import(webpack).Configuration} */ const config { output: { path: path.join(__dirname, dist), filename: output.js }, stats: summary }; module.exports config;在仓库根目录执行以下命令即可复现该示例产物会写入examples/stats-summary/diststats只影响终端报告不影响产物内容cd examples/stats-summary npx webpackREADME 中该示例的终端输出被归在 Production mode生产模式之下呈现为一行状态摘要webpack X.X.X compiled successfully对比同仓库的其余 stats 示例可以看到档位差异examples/stats-minimal 在摘要之外多出1 asset/1 module两行计数examples/stats-normal 会列出asset output.js 28 bytes ...与./example.js 29 bytes ...examples/stats-detailed 还会输出 chunk、入口点、模块深度以及LOG from webpack.*的分组日志而 examples/stats-none 则完全不输出任何内容。几个示例共享同一份业务代码与几乎相同的输出产物差别只在 stats 报告——这直观说明了 stats 配置与打包结果彼此独立。summary 预设的源码语义它到底打开了什么从输出看 summary 很安静但在源码层面它并不是简单地少打印。查看NAMED_PRESETS中 summary 的定义lib/stats/DefaultStatsPresetPlugin.jssummary: { all: false, version: true, errorsCount: true, warningsCount: true }其展开后的语义如下字段summary 取值含义allfalse全局总开关关闭未显式指定的报告项资产、模块、chunk、日志等一律不输出versiontrue报告头部附带 webpack 版本号终端中的webpack X.X.X即由此而来errorsCounttrue开启错误计数本次构建存在错误时会以计数形式汇总呈现warningsCounttrue开启警告计数本次构建存在警告时会以计数形式汇总呈现因此在没有任何错误与警告的干净构建中summary 的输出收敛为一行webpack X.X.X compiled successfully一旦编译出现错误或警告计数开关会将其以汇总条目的形式呈现在状态行上源码层面即errorsCount/warningsCount为true的效果。需要保留错误/警告的详细堆栈与模块来源时应改用errors-only或errors-warnings档位见 lib/stats/DefaultStatsPresetPlugin.js两者都会把错误与警告的展示空间errorsSpace/warningsSpace置为Infinity并开启moduleTrace。预设如何被施加statsPreset 钩子与归一化理解 summary 的含义后再来看它是在何时、以何种顺序生效的。webpack 对 stats 的处理分两个阶段归一化编译开始时用户配置中stats的值会被归一化为统一的对象结构。字符串/布尔值会被包成{ preset: ... }见 lib/config/normalization.js。施加预设并补齐默认值当 stats 选项对象存在preset时lib/Compilation.js 的createStatsOptions会先触发if (options.preset ! undefined) { this.hooks.statsPreset.for(options.preset).call(options, context); } this.hooks.statsNormalize.call(options, context);statsPreset钩子由 lib/stats/DefaultStatsPresetPlugin.js 注册对于NAMED_PRESETS中的每个预设名插件都通过compilation.hooks.statsPreset.for(key)挂载回调用applyDefaults把该预设的字段值填进选项只有未定义的关键字才会被写入用户显式给出的字段会覆盖预设值。紧接着statsNormalize钩子再补齐DEFAULTS中的其余默认项例如 colors终端着色、输出间距等。也就是说stats: summary的完整语义是summary 预设定义的 4 个字段 DEFAULTS中的其余全局默认项任何单个字段都可以被后续对象配置覆盖。对象模式在 summary 基础上做细粒度定制stats同样支持直接传入选项对象。如果希望获得 summary 的效果、同时额外开启终端着色可以在 webpack.config.js 中写出与预设等价的对象use strict; const path require(path); /** type {import(webpack).Configuration} */ const config { output: { path: path.join(__dirname, dist), filename: output.js }, // 等价于 stats: summary并额外开启终端着色 stats: { all: false, version: true, errorsCount: true, warningsCount: true, colors: true } }; module.exports config;同理当summary不能满足需求时可以在对象中打开个别字段如errors: true、moduleTrace: true、assets: true等webpack 会把这些字段与DEFAULTS中未显式关闭的默认项合并生效。需要注意若对象中未设置all默认项会按各自规则决定开关因此想从一个干净基线上单独打开某一项时显式书写all: false是最可控的做法。小结stats: summary是 webpack stats 输出体系中最内敛的一档预设通过all: false关掉所有细节仅保留version、errorsCount、warningsCount三个信息源让构建终端只呈现一行最干净的编译结果。它非常适合需要在日志噪音很小的环境下确认构建状态、或在 CI 中只关心是否编译成功的场景。若想深入学习这套预设体系推荐按如下路径在仓库内继续阅读查看完整预设定义与默认值lib/stats/DefaultStatsPresetPlugin.js查看预设施加顺序与归一化入口lib/Compilation.js、lib/config/normalization.js查看合法取值与字段校验schemas/WebpackOptions.json对照观察各档位差异stats-none、stats-summary、stats-minimal、stats-normal、stats-detailed。【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考