如何让 webpack 不那么冗长？答案

【问题标题】：How to make webpack less verbose?如何让 webpack 不那么冗长？
【发布时间】：2015-09-05 12:17:15
【问题描述】：

这是韦斯·克雷文的新噩梦！

为什么我什至需要对每一点改变都感到恐惧？如何关闭这些通知？！

【问题讨论】：

【解决方案1】：

您可以在 webpack-dev-server 的命令行中添加 --quiet 和 --no-info：http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

如果你在监视模式下使用webpack，你可以在它后面加上| awk '{if ($0 !~ /^ *\[[0-9]*\]/) {print} else {if ($0 ~ /\[built\]/) {print}}}'，它会打印除了没有重建的文件之外的所有输出。

【讨论】：

如果我不使用开发服务器怎么办？
我需要一些信息，例如我想知道特定的块被重新编译并成功构建，但我不在乎没有改变的块
如果您使用监视模式，您可以 grep for [built]，它只会显示已重建的内容。我认为对于其他行为，您需要打开一个问题。
这两个标志对我没有影响。
@VitaliiKorsakov 在下面查看我对express 版本的回答。

【解决方案2】：

quiet 和 no-info 没有为我做任何有用的事情。相反，我最终使用了 grep 过滤器。

npm run dev | grep -v "node_modules\|\[built\]"

这将删除任何包含[built] 或node_modules 的行，这样可以更轻松地查看实际的构建错误，而无需滚动浏览一堆终端输出行。

我已将它放在我的 package.json 的 scripts 部分，因此我可以使用 npm run dev-quiet 来获取过滤后的输出日志。

【讨论】：

【解决方案3】：

我稍微更改了 Haken 的 grep 语句，使其在初始加载和更新 JS 文件时也能正常工作。

这是我的 package.json 中的代码 sn-p。

scripts": {
    "dev": "npm run dev | grep -v \"\\[\\d*\\]\""
}

这将过滤掉所有包含 [231]、[232] 等模式的行。

【讨论】：

【解决方案4】：

使用 Webpack-Dev-Server 配置文件，您可以挂钩 API。

除非您遇到错误，否则使用 noInfo: true 将禁用信息性消息。

使用quiet: true 会删除所有控制台信息，甚至是错误。

参考：https://webpack.github.io/docs/webpack-dev-server.html#api

【讨论】：

【解决方案5】：

如果您使用express 版本，则可以包含noInfo 选项：

import webpackMiddleware from 'webpack-dev-middleware';

app.use(webpackMiddleware(compiler, {
  noInfo: true
}));

【讨论】：

这对我有用。我更喜欢不需要 grep 输出的解决方案。

【解决方案6】：

如果你使用karma-webpack，你可以把它放到你的配置文件中：

webpackMiddleware: {
 noInfo: true,
 stats: 'errors-only'
}

noInfo: false 不向控制台显示任何信息（仅警告和错误）documentation

stats: 'errors-only' 仅在发生错误时输出documentation

【讨论】：

【解决方案7】：

使用--hide-modules 选项运行webpack。

【讨论】：

【解决方案8】：

使用 webpack 的统计选项。

例如，要删除块生成的数百行：

stats: {
    chunks: false
}

要删除有关模块的信息：

stats: {
    chunkModules: false
}

更多选项请参见the stats documentation。

【讨论】：

【解决方案9】：

您可以使用 Webpack CLI 的 --display option 设置统计输出的详细程度。这是available values。

例如

--display=minimal

【讨论】：

在 Webpack 5 中是--stats=minimal

【解决方案10】：

使用webpack-dev-middleware 时，您现在必须在配置选项中使用logLevel 而不是noInfo (as of 12/18/17)。

示例：

require("webpack-dev-middleware")(compiler, {
    logLevel: "warn", // set the logLevel
});

【讨论】：

【解决方案11】：

来自 webpack 文档：

stats 选项可让您精确控制要显示的捆绑信息。如果您不想使用 quiet 或 noInfo，这可能是一个很好的中间立场，因为您需要一些捆绑信息，但不是全部。

对于 webpack-dev-server，这个属性需要在 devServer 对象中。

//example with module.exports in webpack.config.js
module.exports = {
  //...
  stats: 'minimal'
};

//example with dev-sever in webpack.config.js
dev-sever: {
  //...
  stats: 'minimal'
}

请参阅文档了解其他选项，包括 errors-only、none、verbose 等。

参考：https://webpack.js.org/configuration/stats/

【讨论】：

这个对我有用...将它添加到开发服务器选项中。似乎它覆盖了我最初给出的一般配置。未记录在 devserver 的选项中。我想在某些时候必须清楚一些通用选项可用于开发服务器？哎呀，很多thx
确实记录在案webpack.js.org/configuration/dev-server/#devserver-stats-
我不知道为什么这个答案不高。这是做事的正确方法。特别看这部分：webpack.js.org/configuration/stats/#extending-stats-behaviours
它对我不起作用，所以我猜它没有任何意义。如果我输入 { stats: 'verbose' } 它不会记录任何信息。控制台几乎是空的。

【解决方案12】：

我有同样的问题，我的解决方案不是新的，但详细说明了以前的答案。在您的 webpack.dev.js 中，您可以对 devServer 使用以下配置。关注stats部分：

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true,
    compress: true,
    port: 3420,
    inline: true,
    stats: {
      colors: true,
      chunks: false,
      hash: false,
      version: false,
      timings: false,
      assets: false,
      children: false,
      source: false,
      warnings: true,
      noInfo: true,
      contentBase: './dist',
      hot: true,
      modules: false,
      errors: true,
      reasons: true,
      errorDetails: true,
    },
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({
    }),
  ],
});

【讨论】：