Webpack：隐藏webpack打印的一些模块--display-modules --display-reasons

Question

问题

是否可以在webpack --display-modules --display-reasons？

的打印输出中指定要隐藏（忽略）的模块

设置

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'
        }
      }
    ]
  }

};

动机

通过运行webpack我在 build/index.js 中获得令人惊叹的计划，该计划打印出来：

Hello! World!

更有趣的部分是webpack --display-modules --display-reasons打印的输出：

此输出非常强大：

• 立即看到项目结构
• 识别其他模块需要哪些模块
• 重复使用这些模块的次数
• 其他模块中需要这些模块
• 使用的模块格式
• 是我的模块还是来自node_modules
• 看起来非常酷

上面提到的专业人士强烈要求我在日常工作中使用这个输出。

但可能有问题。

问题

当我使用带有大量模块的大型外部包时，它可能会模糊我之前图片的输出。将core-js添加到我的文件中时可以看到它：

src/index.js (modified)

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

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

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

现在我webpack --display-modules --display-reasons打印的输出如下所示：

此输出很长（很难滚动到顶部）。 core-js使我以前的输出变得臃肿，我失去了之前提到的分析它的优点。

提示

• 问题输出并不总是在最后
• 问题仅与core-js（仅作为示例）
无关
• 切换到预构建源不是解决方案
• 要求有问题的包必须出现在.js
以外的源webpack.config.js文件中

Answer 1

要排除多个文件夹，请将以下内容添加到webpack.config.js

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

不使用--display-exclude

Answer 2

In webpack there is undocumented option --display-exclude后的PHP，如源代码中所述，排除输出中的模块。

这正是您所需要的，因此，请将此参数传递给webpack cli：

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