Is there a way to make webpack not show all the chunks it's compiling?

Question

The default webpack CLI output is way too verbose for my liking. As soon as I import React from one of my files, the output explodes, showing all of the chunks (?) being packed:

webpack result is served from /
content is served from /Users/me/myproject
Hash: aaaf5afc6582f3222f55
Version: webpack 1.12.14
Time: 1175ms
   Asset    Size  Chunks             Chunk Names
index.js  677 kB       0  [emitted]  main
chunk    {0} index.js (main) 643 kB [rendered]
    [0] ./src/app.js 574 bytes {0} [built] [1 error]
    [1] ./~/react/react.js 56 bytes {0} [built]
    [2] ./~/react/lib/React.js 1.49 kB {0} [built]
    [3] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
    [4] ./~/process/browser.js 2.06 kB {0} [built]

...

  [155] ./~/fbjs/lib/mapObject.js 1.47 kB {0} [built]
  [156] ./~/react/lib/onlyChild.js 1.21 kB {0} [built]
  [157] ./~/react/lib/deprecated.js 1.77 kB {0} [built]
  [158] ./~/react-dom/index.js 63 bytes {0} [built]
  [159] ./src/component.js 339 bytes {0} [built] [1 error]

I really don't care about all of that extra information. I'd be happy with a way to either:

Disable the chunks altogether, just showing the overall progress
Only show my own code, not stuff I'm importing from my node_modules

At the moment my webpack command is webpack-dev-server --progress. My webpack config is pretty basic, just specifying entry, output, and loaders for babel and eslint.

score 11 · Answer 1 · answered Jun 09 '16 at 15:34

11

From the command line, I haven't been able to find a way to do this.

However, if you have a webpack.config.js file, there are two options for suppressing the list of modules ..

devServer: {
    stats: 'errors-only'
}

or

devServer: {
    stats: { chunks: false }
}

Hope that helps.

answered Jun 09 '16 at 15:34

freethebees

957
10
24

2

Not sure if I'm doing something totally wrong, but I can't get any of these to work. It still always prints the massive list of modules :( I've also tried adding it to the webpack section of my karma config when running my tests, and it doesn't work there either. – Cam Jackson Jun 14 '16 at 05:24
1

For whatever it's worth - these both work for me. Running webpack-dev-server 1.16.2 – Chris B Dec 07 '16 at 19:30
1

devServer: { stats: { chunks: false } } Worked for me. – Praym Jan 12 '17 at 17:10
The only place this worked for me was 'webpack.base.babel' for those of you using react-boilerplate. – David Oct 24 '17 at 22:34

score 11 · Answer 2 · edited Feb 10 '19 at 15:42

11

This worked in my case:

webpack --hide-modules

edited Feb 10 '19 at 15:42

John Weisz

30,137
13
89
132

answered Dec 20 '16 at 14:26

artnova

141
1
4

searched far and wide - best answer out there – scniro Jun 20 '17 at 01:13
Does not work in webpack 3 (EDIT: it actually does, as long as you do not pass the `--color` flag as well) – csvan Jan 13 '18 at 13:19

Will · Answer 3 · 2018-06-30T16:32:38.163

11

If you have a webpack.config.js in your project, add the following to the returned object of the exports function:

devServer: {
    stats: {
        assets: false,
        children: false,
        chunks: false,
        hash: false,
        modules: false,
        publicPath: false,
        timings: false,
        version: false,
        warnings: true,
        colors: {
            green: '\u001b[32m'
        }
    }
}

edited Jun 30 '18 at 16:32

answered Feb 20 '17 at 20:06

Will

171
1
6

Adding these "stats:" options to the root of the module.exports dictionary in my webpack.config.js, combined with the --hide-modules CLI parameter (as suggested by @artnova) allowed to mute/tune every detail of the output for the webpack package. – JoepBC Mar 10 '17 at 09:30

Bob Sponge · Answer 4 · 2016-03-11T10:42:26.180

5

There is webpack undocumented option --hide-modules. You can pass it to webpack from webpack-dev-server by adding this line to webpack config:

devServer: { 'hide-modules': true }

edited Mar 11 '16 at 10:42

answered Mar 11 '16 at 08:01

Bob Sponge

4,708
1
23
25

Just tried this and it doesn't seem to make any difference. I tried `--hide-modules=true` as well. – Cam Jackson Mar 11 '16 at 10:22
3

I also found a `--quiet` option for webpack-dev-server. That gets rid of the module/chunk listing, but it also removes any indication at all that the packing has happened when I change the code. So that's probably too *little* information. – Cam Jackson Mar 11 '16 at 10:23
1

`hide-modules` is webpack option and seems it not passed from webpack-dev-server. – Bob Sponge Mar 11 '16 at 10:36
1

Nope, that doesn't seem to work either :( On the bright side, I've realised that it only shows the full list on the first run. If I then go and modify a file and save it, the console only shows info about the file I just modified. I can live with that :) – Cam Jackson Mar 12 '16 at 02:58

score 5 · Answer 5 · edited Jan 12 '19 at 23:44

5

Since Webpack 3+ there is --display flag which allows fine-grained control over output:

--display=(verbose|detailed|normal|minimal|errors-only|none)

edited Jan 12 '19 at 23:44

Alex

59,571
22
137
126

answered Mar 01 '18 at 08:45

csvan

8,782
12
48
91

PKDev · Answer 6 · 2017-07-07T20:39:51.373

0

In the webpack.config.ts, you can try

devServer : {
  stats: 'minimal',
  watchOptions: { 
   poll: undefined,
   aggregateTimeout: 300,
   ignored: /node_modules/
 }
}

Hope that works.

edited Jul 07 '17 at 20:39

answered Jul 07 '17 at 20:34

PKDev

21
4

Is there a way to make webpack not show all the chunks it's compiling?

6 Answers6