CODEWITHSUNDEEP
webpackwebpack-dev-server
kentcdodds
kentcdodds

Reputation: 29031

Webpack: silence output

I would like to know if there's a configuration option to tell webpack to only log the "important information" to the terminal. Pretty much just errors and warnings, not all of this:

output of terminal with webpack

There's just so much output! Would love to suppress the common stuff and only have webpack output the warnings/errors. Would like a solution for webpack, webpack-dev-server, and karma-webpack.

Note: I tried noInfo: true and quiet: true but that didn't seem to do the trick.

Edit: I'm thinking this may not be possible, so I've created an issue on github: https://github.com/webpack/webpack/issues/1191

Upvotes: 116

Views: 71052

Answers (13)

Denis Howe
Denis Howe

Reputation: 2411

webpack --stats errors-only is the command line flag you probably want (v5).

Upvotes: 1

Ahmad Awais
Ahmad Awais

Reputation: 37120

Actually, these two work great.

stats: 'errors-only',

at the end of the exported object.

One could also use stats: 'minimal', it only outputs when errors or new compilation happen. Read more from the official documentation of Webpack.

Upvotes: 59

KR34T1V
KR34T1V

Reputation: 493

With Webpack 5 I had to remove stats from devServer and add it as a base config property. All the relevant stats can be found here for additional configuration https://webpack.js.org/configuration/stats/

https://webpack.js.org/configuration/other-options/#infrastructurelogging

The following worked for me: (I use friendly-errors)

{
  stats: 'errors-only',
  infrastructureLogging: {
    level: 'none',
  },
  devServer:{
    // other config
  }
}

You can also be more specific about what to display using an object.

{
  stats: {
    entrypoints: false,
    colors: true,
    assets: false,
    chunks: false,
    modules: false,
  },
  infrastructureLogging: {
    level: 'none',
  },
  devServer:{
    // other config
  }
}

Upvotes: 2

lonix
lonix

Reputation: 20629

Webpack v5

The "most silent" configuration:

infrastructureLogging: { level: 'error' },
stats: 'minimal',

Docs: infrastructureLogging, stats.

Upvotes: 2

bendytree
bendytree

Reputation: 13609

These days noInfo quiet and stats have been replaced by infrastructureLogging in the root of your Webpack config:

// webpack.config.js
...
infrastructureLogging: {
  level: 'error',
},

Upvotes: 10

x-yuri
x-yuri

Reputation: 18873

What you're interested in here is stats module (part) of the Webpack. Basically, it's this module that produces the output. The output by default mostly contains list of assets, and list of modules. You can hide modules with --hide-modules directive. Regarding assets, no similar option exists. But there are presets. You can specify preset with --display option. And preset that hides assets is... none.

There is another way to influence stats: webpack.config.js. Add stats: {assets: false, modules: false} to reduce output significantly. Or stats: 'none' to silence Webpack entirely. Not that I recommend it. Generally errors-only is a way to go. To make it affect webpack-dev-server put it under devServer key.

Webpack 2.x doesn't have --display option. And the only way to hide modules is --hide-modules switch. By that I mean that specifying stats: 'errors-only' or stats: {modules: false} in config has no effect. Since this piece of code overrides all that.

For webpack-dev-server there are also --no-info and --quiet options.

Some more insight into how it works. webpack-cli creates outputOptions object. When compilation finishes, it converts stats to string and outputs it. Stats.toString converts stats to json, then converts json to string. Here you can see the defaults.

Upvotes: 4

papillon
papillon

Reputation: 2063

You've got the --display option that enables you to choose a level of information quantity you want displayed.

From webpack --help:

--display: Select display preset
[string] [choices: "", "verbose", "detailed", "normal", "minimal", "errors-only", "none"]

If you want to configure the informations displayed more precisely, you can also configure your webpack with the stats field in your webpack.config.js.

Upvotes: 17

Chris
Chris

Reputation: 58182

Webpack

  ...
  stats: {
    modules: false,
  },
  ...

Dev Server

  ...
  devServer: {
    stats: {
      modules: false,
    },
  },
  ...

Reference

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

Upvotes: 9

aaron.xiao
aaron.xiao

Reputation: 198

Recommend stats config below, this will keep significant logs and remove useless info.

stats: {
  cached: false,
  cachedAssets: false,
  chunks: false,
  chunkModules: false,
  chunkOrigins: false,
  modules: false
}

Upvotes: 2

TetraDev
TetraDev

Reputation: 17094

In my webpack config, Doing this reduced my incremental build time by 8 seconds and silenced output. The main one is chunks: false

Play with it to fit your needs

module.exports = {
 devServer: {
  stats: {
    colors: true,
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: false,
    errorDetails: false,
    warnings: false,
    publicPath: false
  }
 }
}

Upvotes: 68

Kai Sellgren
Kai Sellgren

Reputation: 30212

If you're using the Webpack API directly, and you're calling stats.toString(), then you can pass parameters to keep down the noise:

webpack(config).watch(100, (err, stats) => {
  console.log(stats.toString({chunks: false}))
})

Upvotes: 1

leocreatini
leocreatini

Reputation: 696

If you are using the webpack-dev-middleware you can throw the noInfo: true in an object as the second parameter. Also assuming you also have a node/express server running.

enter image description here

Cheers.

Upvotes: 9

kentcdodds
kentcdodds

Reputation: 29031

I don't know when this feature was added, but I just noticed in the docs that you can add a webpackMiddleware property and on that you can specify noInfo: true. Doing this removes all the noise! But you still see output when there are errors. Yay!

Upvotes: 33

Related Questions