How to make webpack less verbose?

This is Wes Craven's New Nightmare!

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

Solution 1:

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

Solution 2:

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.

Solution 3:

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/

Solution 4:

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.