Webpack:静默输出

115

我想知道是否有配置选项可以告诉webpack仅将“重要信息”记录到终端。基本上只有错误和警告,而不是所有这些:

output of terminal with webpack

输出太多了!希望抑制常见的内容,只让webpack输出警告/错误。希望有解决方案适用于webpackwebpack-dev-serverkarma-webpack

注意: 我尝试过noInfo: truequiet: true,但似乎没起作用。


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


2
看起来在命令行上,noInfo选项实际上是--info的相反,它的默认值为true,因此如果你运行webpack-dev-server --info false,它应该会让你更接近你想要的结果。 - naartjie
2
似乎webpack-dev-server做到了这一点...现在如果我能在我的测试中使用它就好了 :-) - kentcdodds
2
如果有人感兴趣,这是我现在执行的命令:NODE_ENV=development webpack-dev-server --content-base app/ --port 8888 --colors --progress --info false - kentcdodds
2
这个也可以:NODE_ENV=development webpack-dev-server --content-base app/ --port 8888 --colors --progress --no-info - kentcdodds
啊,"--no-info" 很好知道,谢谢。 - naartjie
显示剩余2条评论
12个回答

67

在我的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
  }
 }
}

6
非常好!需要禁用的关键字是hash、version、timings、assets和chunks - Neal Ehardt

59

实际上,这两个都非常出色。

stats: 'errors-only',

在导出的对象末尾处。

也可以使用stats: 'minimal',,它仅在发生错误或新编译时输出。有关更多信息,请阅读Webpack的官方文档。


33

我不知道这个特性是什么时候添加的,但是我刚刚注意到在文档中,你可以添加一个webpackMiddleware属性,并且在这个属性上指定noInfo: true。这样做可以消除所有噪音!但是当有错误时,你仍然会看到输出。太好了!


17

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

webpack --help中得知:

--display: Select display preset
[string] [choices: "", "verbose", "detailed", "normal", "minimal", "errors-only", "none"]
如果您希望更精确地配置显示的信息,还可以在webpack.config.js中使用stats字段配置您的webpack。 了解更多

10

这些天,在你的Webpack配置文件的根目录中,noInfoquietstats已被infrastructureLogging替换:

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

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

enter image description here

干杯。


我发布这篇文章是为了其他遇到类似问题但配置略有不同的人,因为谷歌搜索会将他们带到这里。 - leocreatini
2
你也可以在 webpack.config.js 的 devServer 配置项中添加 noInfo: true - Chad Johnson
只有这个对我起作用。在webpackMiddleware上也适用。谢谢,糟糕的输出让我发疯。 - Doa

8

4
你感兴趣的是stats 模块(部分)的Webpack。基本上,这个模块产生了输出。默认情况下,输出主要包含资产列表和模块列表。您可以使用--hide-modules指令隐藏模块。关于资产,没有类似的选项。但有预设。您可以使用--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 对象。当编译完成时,它将状态转换为 string 并将其输出为 outputsStats.toStringstats 转换为 json,然后将 json 转换为 string。在这里,您可以看到默认值


2

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

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

1

在Webpack 5中,我必须从devServer中删除stats并将其添加为基本配置属性。 所有相关的统计信息可以在此处找到以进行其他配置https://webpack.js.org/configuration/stats/

https://webpack.js.org/configuration/other-options/#infrastructurelogging

以下方法适用于我:(我使用friendly-errors插件)

{
  stats: 'errors-only',
  infrastructureLogging: {
    level: 'none',
  },
  devServer:{
    // other config
  }
}

您也可以使用对象来更具体地指定要显示的内容。
{
  stats: {
    entrypoints: false,
    colors: true,
    assets: false,
    chunks: false,
    modules: false,
  },
  infrastructureLogging: {
    level: 'none',
  },
  devServer:{
    // other config
  }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接