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 中得到了这个 stunning 程序，它打印：

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 中有一个未记录的选项 --display-exclude，如源代码中所述，在输出中排除模块。

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

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

Answer 2

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

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

不使用 --display-exclude