如何让 webpack 不那么冗长？

Posted 2023-02-16

【中文标题】如何让 webpack 不那么冗长？

【英文标题】：How to make webpack less verbose?

【发布时间】：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(
    ),
  ],
);