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

在 webpack 中有一个未记录的选项 --display-exclude，如源代码中所述，在输出中排除模块。

这正是你所需要的，所以，将此参数传递给 webpack cli：

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