Webpack：静音输出

Posted 2023-02-16

【中文标题】Webpack：静音输出

【英文标题】：Webpack: silence output

【发布时间】：2015-08-25 17:35:08

【问题描述】：

我想知道是否有配置选项告诉 webpack 只将“重要信息”记录到终端。几乎只是错误和警告，而不是全部：

有这么多的输出！很想压制常见的东西，只让 webpack 输出警告/错误。想要webpack、webpack-dev-server 和karma-webpack 的解决方案。

注意：我尝试了noInfo: true 和quiet: true，但似乎没有奏效。

---

编辑：我认为这可能是不可能的，所以我在 github 上创建了一个问题：https://github.com/webpack/webpack/issues/1191

【问题讨论】：

在命令行上看起来noInfo 选项实际上是--info 的倒数，默认为true 所以如果你运行webpack-dev-server --info false 它应该让你更接近你想要的地方成为。

这似乎是为 webpack-dev-server 做的......现在如果我能得到它来做我的测试:-)

如果有人好奇，这就是我现在执行的操作：NODE_ENV=development webpack-dev-server --content-base app/ --port 8888 --colors --progress --info false

这也可以：NODE_ENV=development webpack-dev-server --content-base app/ --port 8888 --colors --progress --no-info

啊，--no-info 很高兴知道，谢谢

【参考方案1】：

在我的 webpack 配置中，这样做将我的增量构建时间减少了 8 秒并抑制了输出。主要的是chunks: false

使用它来满足您的需求

module.exports = 
 devServer: 
  stats: 
    colors: true,
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: false,
    errorDetails: false,
    warnings: false,
    publicPath: false
  
 

【讨论】：

效果很好！要禁用的关键是hash, version, timings, assets, chunks。

【参考方案2】：

? 你不需要所有这些。你所需要的只是

实际上，这两个效果很好。

stats: 'errors-only',

在导出对象的末尾。

也可以使用stats: 'minimal',，它仅在发生错误或新编译时输出。阅读更多来自official documentation of Webpack.

【参考方案3】：

我不知道这个功能是什么时候添加的，但我刚刚注意到在the docs 中可以添加webpackMiddleware 属性，并且可以指定noInfo: true。这样做可以消除所有噪音！但是当出现错误时，您仍然会看到输出。耶！

【参考方案4】：

您可以使用--display 选项来选择要显示的信息量级别。

来自webpack --help：

--display: Select display preset
[string] [choices: "", "verbose", "detailed", "normal", "minimal", "errors-only", "none"]

---

如果您想更精确地配置显示的信息，您还可以使用webpack.config.js 中的stats 字段配置您的webpack。

【参考方案5】：

如果您使用webpack-dev-middleware，您可以将noInfo: true 作为第二个参数放入对象中。 同时假设你也有一个 node/express 服务器正在运行。

干杯。

【讨论】：

我将这篇文章发布给其他有类似问题但配置略有不同的人，因为谷歌搜索将他们引导到这里。

也可以在webpack.config.js中的devServer配置项中添加noInfo: true。

只有一个对我有用。也适用于 webpackMiddleware。谢谢，垃圾输出快把我逼疯了。

【参考方案6】：

网页包

  ...
  stats: 
    modules: false,
  ,
  ...

开发服务器

  ...
  devServer: 
    stats: 
      modules: false,
    ,
  ,
  ...

参考

https://webpack.js.org/configuration/stats/

【参考方案7】：

如今，noInfo quiet 和 stats 在 Webpack 配置的根目录中已被 infrastructureLogging 取代：

// webpack.config.js
...
infrastructureLogging: 
  level: 'error',
,

【参考方案8】：

您在这里感兴趣的是stats module（部分）Webpack。基本上，正是这个模块产生了the output。默认情况下，输出主要包含资产列表和模块列表。您可以使用 --hide-modules 指令隐藏模块。关于资产，不存在类似的选择。但是有presets。您可以使用--display 选项指定预设。隐藏资产的预设是...none。

还有另一种影响统计数据的方法：webpack.config.js。添加stats: assets: false, modules: false 以显着减少输出。或者 stats: 'none' 完全让 Webpack 保持沉默。不是我推荐它。通常errors-only 是一种方法。要使其影响webpack-dev-server，请将其放在devServer 键下。

Webpack 2.x 没有 --display 选项。隐藏模块的唯一方法是--hide-modules 开关。我的意思是在配置中指定stats: 'errors-only' 或stats: modules: false 无效。由于this 的代码覆盖了所有这些。

对于webpack-dev-server，还有--no-info 和--quiet 选项。

更深入地了解它的工作原理。 webpack-cli 创建 outputOptions object。编译完成后，它将统计信息转换为 string 和 outputs 它。 Stats.toString 将stats 转换为json，然后将json 转换为string。在这里你可以看到the defaults。

【参考方案9】：

推荐下面的统计配置，这将保留重要的日志并删除无用的信息。

stats: 
  cached: false,
  cachedAssets: false,
  chunks: false,
  chunkModules: false,
  chunkOrigins: false,
  modules: false

【参考方案10】：

如果您直接使用 Webpack API，并且您正在调用 stats.toString()，那么您可以传递参数以降低噪音：

webpack(config).watch(100, (err, stats) => 
  console.log(stats.toString(chunks: false))
)