Webpack: silence output
WebpackWebpack Dev-ServerWebpack Problem Overview
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:
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
Webpack Solutions
Solution 1 - Webpack
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
}
}
}
Solution 2 - Webpack
> You don't need all that. All you need is the
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.
Solution 3 - Webpack
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!
Solution 4 - Webpack
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
.
Solution 5 - Webpack
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.
Cheers.
Solution 6 - Webpack
Webpack
...
stats: {
modules: false,
},
...
Dev Server
...
devServer: {
stats: {
modules: false,
},
},
...
Reference
Solution 7 - Webpack
These days noInfo
quiet
and stats
have been replaced by infrastructureLogging in the root of your Webpack config:
// webpack.config.js
...
infrastructureLogging: {
level: 'error',
},
Solution 8 - Webpack
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.
Solution 9 - Webpack
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
}
Solution 10 - Webpack
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}))
})
Solution 11 - Webpack
Webpack v5
The "most silent" configuration:
infrastructureLogging: { level: 'error' },
stats: 'minimal',
Docs: infrastructureLogging
, stats
.