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

Posted 2023-03-07

【中文标题】webpack：隐藏webpack打印的一些模块 --display-modules --display-reasons

【英文标题】：Webpack: Hide some modules printed by webpack --display-modules --display-reasons

【发布时间】：2016-09-25 00:11:05

【问题描述】：

问题

是否可以通过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 中

【问题讨论】：

有一个参数叫--display-exclude，但是我没有找到任何例子。你可以自己试试:)

@BobSponge 它工作得很好——写一个答案并获得名声！

【参考方案1】：

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

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

不使用--display-exclude

【参考方案2】：

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

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

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

【讨论】：

有人知道如何使用此参数传递多个文件夹（数组或正则表达式）吗？我要疯狂地排除 node_modules 和自定义文件夹

这个参数是ModuleFilenameHelpers.matchPart处理的，所以是正则表达式。