Everettss Everettss - 1 month ago 7
Javascript Question

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

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
:

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:

output printed by webpack --display-modules --display-reasons with core-js

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

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"