How to make webpack less verbose?

Question

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?!

Answer 1

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.

Answer 2

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

In Webpack 5:

--stats=minimal

Answer 3

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

Answer 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.

Answer 5

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
});

Answer 6

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/

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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.

Answer 11

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

import webpackMiddleware from 'webpack-dev-middleware';

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

Answer 12

Run webpack with the --hide-modules option.