CODEWITHSUNDEEP
webpackwebpack-dev-server
Vitalii Korsakov
Vitalii Korsakov

Reputation: 47656

How to make webpack less verbose?

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

Upvotes: 51

Views: 25921

Answers (12)

LONGMAN
LONGMAN

Reputation: 990

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

Upvotes: 35

Roman
Roman

Reputation: 21825

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

Upvotes: 1

Alicia C
Alicia C

Reputation: 150

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/

Upvotes: 11

j0hnm4r5
j0hnm4r5

Reputation: 419

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

Upvotes: 0

David Hansen
David Hansen

Reputation: 3207

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.

Upvotes: 4

P Varga
P Varga

Reputation: 20259

Run webpack with the --hide-modules option.

Upvotes: 1

Clay
Clay

Reputation: 11625

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

Upvotes: 3

Timmerz
Timmerz

Reputation: 6199

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

import webpackMiddleware from 'webpack-dev-middleware';

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

enter image description here

Upvotes: 2

Kevin Ghadyani
Kevin Ghadyani

Reputation: 7307

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

Upvotes: 1

w00t
w00t

Reputation: 18281

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.

Upvotes: 15

Adrian So
Adrian So

Reputation: 69

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.

Upvotes: 3

Håken Lid
Håken Lid

Reputation: 23064

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.

Upvotes: 0

Related Questions