如何让 webpack 不那么冗长？

Question

这是Wes Craven的新噩梦！

为什么我什至需要对每一点变化都感到恐惧？我怎样才能关闭这些通知？！

Answer 1

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

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

Answer 2

quiet 和 no-info 对我没有任何用处。相反，我最终使用了 grep 过滤器。

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

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

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

Answer 3

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

这是我 package.json 中的代码片段。

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

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

Answer 4

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

除非出现错误，否则使用 noInfo: true 将禁用信息性消息。

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

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

Answer 5

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

import webpackMiddleware from 'webpack-dev-middleware';

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

Answer 6

如果您正在使用 karma-webpack，您可以将其放入您的配置文件中：

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

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

stats: 'errors-only'只在出错时输出documentation

Answer 7

运行 webpack 带有 --hide-modules 选项。

Answer 8

使用 webpack 的统计选项。

比如去掉chunks生成的几百行：

stats: {
    chunks: false
}

要删除有关模块的信息：

stats: {
    chunkModules: false
}

有关更多选项，请参阅 the stats documentation。

Answer 9

您可以使用 Webpack CLI 的 --display option to set the verbosity of the stats output. Here are the available values。

例如

--display=minimal

Answer 10

使用时 webpack-dev-middleware, you now have to use logLevel instead of noInfo inside the config options (as of 12/18/17).

示例：

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

Answer 11

来自 webpack 文档：

The stats option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you don't want to use quiet or noInfo because you want some bundle information, but not all of it.

For webpack-dev-server, this property needs to be in the devServer object.

//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/

Answer 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({
    }),
  ],
});

如何让 webpack 不那么冗长？

How to make webpack less verbose?

webpack

webpack-dev-server