Webpack: Hide some modules printed by webpack --display-modules --display-reasons

Question

Question

Is it possible to specify modules to be hidden (ignored) in printed output by webpack --display-modules --display-reasons?

---

Setup

structure

.
├── build
│   └── index.js
├── package.json
├── src
│   ├── hello
│   │   └── index.js
│   ├── index.js
│   ├── util
│   │   └── index.js
│   └── world
│       └── index.js
└── webpack.config.js

package.json

{
  "private": true,
  "scripts": {
    "start": "webpack --display-modules --display-reasons"
  },
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "core-js": "^2.4.0",
    "lodash": "^4.13.1"
  }
}

src/index.js

import hello from './hello'
import world from './world'

console.log(`${hello()} ${world()}`);

src/hello/index.js

import util from '../util';
const _ = require('lodash');

const hello = () => _.capitalize(`hello${util()}`);

export default hello

src/world/index.js

import util from '../util';
const _ = require('lodash');

const world = () => _.capitalize(`world${util()}`);

export default world

src/util/index.js

export default () => '!'

webpack.config.js

module.exports = {

  entry: './src/index.js',

  output: {
    filename: './build/index.js'
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: 'es2015'
        }
      }
    ]
  }

};

---

Motivation

By running webpack I get this stunning program in build/index.js which prints:

Hello! World!

More interesting part is in output printed by webpack --display-modules --display-reasons:

This output is very powerful:

• immediately see project structure
• recognise which modules are required by other modules
• how many times those modules are reused
• where those modules are required in other modules
• used module format
• is it my module or from node_modules
• looks super cool

Mentioned above pros connivence me to use this output in daily work.

But can be problem with it.

---

Problem

When I use big external package with a lot of modules it can blur my output from previous picture. You can see it when add for example core-js to my files:

src/index.js (modified)

require('core-js'); // new problematic package

import hello from './hello'
import world from './world'

console.log(`${hello()} ${world()}`);

Now my output printed by webpack --display-modules --display-reasons looks like this:

This output is quite long (it's hard to scroll to top). core-js blooded my previously output and I lost mentioned previous pros of analyze it.

---

Tips

• problematic output isn't always at the end
• problem isn't related only with core-js (it's only example)
• switching to pre-build sources isn't solution
• require of problematic package must occurs in source .js files not in webpack.config.js

Answer 1

To exclude more than one folder add the following to webpack.config.js

 stats: {
     exclude: [
        "node_modules",
        "bower_components",
        "jam",
        "components",
        "my-custom-folder"
     ]
 }

without using --display-exclude

Answer 2

In webpack there is undocumented option --display-exclude which, as described in source code, exclude modules in the output.

This is exactly what you need, so, pass this parameter to webpack cli:

webpack --display-modules --display-reasons --display-exclude="core-js"