如何让Webpack输出更简洁？

Question

如何让Webpack输出更简洁？

webpackwebpack-dev-server

51

这是韦斯·克莱文的《新噩梦》！

输入图像描述

为什么我需要在每一个小改变上都被这个恐怖所困扰？我该如何关闭这些通知呢？！

- Vitalii Korsakov

12个回答

15

你可以在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}}}'，这将打印所有输出，除了未重建的文件。

- w00t

6

如果我不使用开发服务器会怎么样？ - Vitalii Korsakov

2

我需要一些信息，例如我想知道特定的代码块是否已经成功重新编译和构建，但是我不关心那些没有更改的代码块。 - Vitalii Korsakov

如果您使用观察模式，可以使用grep命令查找[built]，它将仅显示已重建的内容。我认为如果需要其他行为，您需要打开一个问题（issue）。 - w00t

4

这两面旗帜对我来说没有区别。 - Alejandro Pérez

2

@VitaliiKorsakov 请看下面我针对 express 版本的回答。 - Timmerz

显示剩余3条评论

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/

- Alicia C

这个对我起作用了...将其添加到开发服务器选项中。似乎覆盖了我最初给出的一般配置。在devserver选项中没有记录。我想某些一般选项对于开发服务器肯定是清晰的吧？非常感谢。 - mithril_knight

它确实有记录 https://webpack.js.org/configuration/dev-server/#devserver-stats- - mithril_knight

我不知道为什么这个答案没有更高的评价。这是正确的做法。特别是，请看这部分内容：https://webpack.js.org/configuration/stats/#extending-stats-behaviours - Stan Lin

1

它对我不起作用，所以我猜它没有任何要点。如果我加上 { stats: 'verbose' } 它就不会记录任何信息。控制台几乎是空的。 - ADM-IT

这是最好的答案。对我来说在Webpack 5和DevServer 4.9.3下有效 (https://webpack.js.org/configuration/dev-server/)。 - Subfuzion

4

使用webpack的stats选项。

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

stats: {
    chunks: false
}

移除模块信息的方法：

stats: {
    chunkModules: false
}

请查看统计文档，了解更多选项。

- David Hansen

3

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

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

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

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

- Adrian So

3

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

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

noInfo: false：不在控制台输出任何信息（仅警告和错误）文档

stats: 'errors-only'：只有在发生错误时才输出信息文档

- Clay

2

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

import webpackMiddleware from 'webpack-dev-middleware';

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

- Timmerz

这个对我有用。我更喜欢一种无需使用grep输出的解决方案。 - Holf

1

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

- ՕլՁՅԿ

1

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

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

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

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

- Kevin Ghadyani

1

我遇到了同样的问题，我的解决方案并不新，但是详细说明了之前的答案。在你的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({
    }),
  ],
});

- Roman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LONGMAN · Accepted Answer

你可以使用Webpack CLI的--display选项来设置统计输出的详细程度。以下是可用的值。

例如。

--display=minimal

在Webpack 5中：

--stats=minimal