How to make webpack less verbose?

Question

This is Wes Craven's New Nightmare!

enter image description here

Why do I even need this horror on every little bit of change? How can I turn off these notifications?!

score 35 · Answer 1 · edited Dec 06 '17 at 18:00

35

You can use Webpack CLI's --display option to set the verbosity of the stats output. Here are the available values.

E.g.

--display=minimal

edited Dec 06 '17 at 18:00

Andrea Carraro

9,731
5
33
57

answered Dec 06 '17 at 10:42

LONGMAN

980
1
14
24

6

In Webpack 5 it's `--stats=minimal` – fregante Feb 16 '21 at 04:14
What is stats output? Is it related to log level? – Ville Dec 12 '22 at 11:05

w00t · Accepted Answer · 2016-05-11T14:03:38.697

15

You can add --quiet and --no-info to webpack-dev-server's command line: http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

If you use webpack in watch mode, you can put | awk '{if ($0 !~ /^ *\[[0-9]*\]/) {print} else {if ($0 ~ /\[built\]/) {print}}}' after it, which will print all output except files that were not rebuilt.

edited May 11 '16 at 14:03

answered Jun 22 '15 at 20:04

w00t

17,944
8
54
62

6

What if I don't use dev server? – Vitalii Korsakov Jun 24 '15 at 13:52
2

I need some information, e.g. I want to know that particular chunk was recompiled and built successfully, but I don't care about chunks which wasn't changed – Vitalii Korsakov Jun 25 '15 at 12:14
If you use watch mode you can grep for [built] and it will show you only the things that were rebuilt. I think for other behavior you'll need to open an issue. – w00t Jun 25 '15 at 19:41
4

Those two flags do not make a difference for me. – Alejandro Pérez Mar 16 '16 at 19:07
@pete-hodgson why did you change the `grep` to `grep -v`? If you want to see only rebuilt files, that's what you want. – w00t May 11 '16 at 08:49
@pete-hodgson I changed the filter to awk because I could not make perl do the more sophisticated filtering it does now. – w00t May 11 '16 at 14:04
2

@VitaliiKorsakov see my answer below for `express` version. – Timmerz Sep 09 '16 at 14:22
What is that `awk` command? My console thinks that *'awk' is not recognized as an internal or external command,* (Win 10 PowerShell)... – Konrad Viltersten Jan 21 '17 at 13:46

score 11 · Answer 3 · edited Jun 20 '20 at 09:12

11

From webpack docs:

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'
}

See docs for other options including errors-only, none, verbose and more.

ref: https://webpack.js.org/configuration/stats/

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 04 '18 at 15:25

Alicia C

150
2
8

this one worked for me... adding it to the devserver options. seems like it was overriding the general config I gave at first. not documented in the options from devserver. I suppose in some point must be clear that some general options are available for dev server? heck, many thx – mithril_knight Feb 07 '19 at 02:19
it is indeed documented https://webpack.js.org/configuration/dev-server/#devserver-stats- – mithril_knight Feb 07 '19 at 03:05
I dont know why this answer isn't higher. This is the right way to do things. Particularly, look at this part: https://webpack.js.org/configuration/stats/#extending-stats-behaviours – Stan Lin Sep 03 '19 at 10:45
1

It is not working for me so why I guess it has no points. If I put { stats: 'verbose' } it does not log any info. The console is almost empty. – ADM-IT Sep 30 '20 at 18:59
This is the best answer. Works for me with Webpack 5 and DevServer 4.9.3 (https://webpack.js.org/configuration/dev-server/). – Subfuzion Jul 28 '22 at 15:33

score 4 · Answer 4 · answered Jun 22 '17 at 17:31

4

Use webpack's stats options.

For example, to remove the hundreds of lines generated by chunks:

stats: {
    chunks: false
}

To remove information about modules:

stats: {
    chunkModules: false
}

See the stats documentation for many more options.

answered Jun 22 '17 at 17:31

David Hansen

2,857
2
21
19

score 3 · Answer 5 · answered Apr 06 '16 at 07:59

I changed Haken's grep statement slightly so that it works on initial load and when I update a JS files as well.

Here is the code snippet in my package.json.

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

This will filter out all lines that contains patterns like [231], [232], etc.

score 3 · Answer 6 · answered Jan 24 '17 at 05:12

If you're using karma-webpack, you can place this into your config file:

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

noInfo: false display no info to console (only warnings and errors) documentation

stats: 'errors-only' only output when errors happen documentation

score 2 · Answer 7 · answered Sep 09 '16 at 14:16

2

If you use the express version then you can include noInfo option:

import webpackMiddleware from 'webpack-dev-middleware';

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

answered Sep 09 '16 at 14:16

Timmerz

6,090
5
36
49

This worked for me. I prefer a solution where I'm not having to grep output. – Holf Jan 04 '17 at 21:13

score 1 · Answer 8 · answered Aug 07 '16 at 11:00

Using a Webpack-Dev-Server config file, you can hook into the API.

Using noInfo: true will disable informational messages unless you have an error.

Using quiet: true removes all console information, even errors.

Reference: https://webpack.github.io/docs/webpack-dev-server.html#api

score 1 · Answer 9 · answered Jun 20 '17 at 09:40

1

Run webpack with the --hide-modules option.

answered Jun 20 '17 at 09:40

P Varga

19,174
12
70
108

score 1 · Answer 10 · answered Oct 09 '19 at 02:53

I had the same issue and my solution is not new, but details previous answers. In your webpack.dev.js you can use the following configuration for devServer. Pay attention to the stats section:

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

score 0 · Answer 11 · answered Apr 01 '16 at 13:45

quiet and no-info didn't do anything useful for me. Instead I ended up using a grep filter.

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

This will remove any line containing [built] or node_modules, which makes it easier to see the actual build errors without scrolling through a bunch of lines of terminal output.

I've put this in the scripts section of my package.json so I can use npm run dev-quiet to get the filtered output log.

j0hnm4r5 · Answer 12 · 2018-05-02T19:26:04.807

0

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

Example:

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

edited May 02 '18 at 19:26

answered May 02 '18 at 19:20

j0hnm4r5

407
3
17

How to make webpack less verbose?

12 Answers12