Webpack 列出用于构建网页包块的所有可传递依赖项

我已经在我的github帐户上创建了

我有一个带有两个入口点的网页配置——“功能一”和“功能二”。“功能一”包括一个CSS文件，该文件本身包含一个徽标：

logo.svg

当webpack运行此代码时，

logo.svg

文件将包含在

dist/

文件夹中

在webpack的“emit”阶段，可以检查每个入口点的块

Chunk

类有一个

files

属性，它应该列出所有文件 参与这一块。检查时，我们可以看到引用了

feature one.js

和

feature one.css

， 但是

logo.svg

不是

相反，

模块

类有一个

fileDependencies

属性，该属性列出了所有涉及的文件路径，以及此列表 包含指向

logo.svg

文件的（完全限定路径）。区块中涉及的模块可通过

chunk

的

modules

属性访问

以下是示例的网页输出：

> yarn webpack
$ "<<checkout-dir>>/node_modules/.bin/webpack"
chunk info {
    "chunk id#0": {
        "modules": {
            "2": {
                "filepaths": [
                    "<<checkout-dir>>/src/feature-two.js"
                ]
            },
            "3": {
                "filepaths": [
                    "<<checkout-dir>>/src/feature-two.css",
                    "<<checkout-dir>>/node_modules/css-loader/lib/css-base.js",
                    "<<checkout-dir>>/src/feature-two.css"
                ]
            }
        },
        "files": [
            "feature-two.js",
            "feature-two.css"
        ]
    },
    "chunk id#1": {
        "modules": {
            "0": {
                "filepaths": [
                    "<<checkout-dir>>/src/feature-one.js"
                ]
            },
            "1": {
                "filepaths": [
                    "<<checkout-dir>>/src/feature-one.css",
                    "<<checkout-dir>>/node_modules/css-loader/lib/css-base.js",
                    "<<checkout-dir>>/src/feature-one.css",
                    "<<checkout-dir>>/src/logo.svg"
                ]
            }
        },
        "files": [
            "feature-one.js",
            "feature-one.css"
        ]
    }
}
Hash: 9d8603d6b25981dfd88f
Version: webpack 3.5.5
Time: 403ms
                               Asset       Size  Chunks             Chunk Names
2baa77d6015e6de6adf1ffa247530568.svg  679 bytes          [emitted]  
                      feature-two.js    3.01 kB       0  [emitted]  feature-two
                      feature-one.js    3.23 kB       1  [emitted]  feature-one
                     feature-one.css  136 bytes       1  [emitted]  feature-one
                     feature-two.css   50 bytes       0  [emitted]  feature-two
   [0] ./src/feature-one.js 142 bytes {1} [built]
   [1] ./src/feature-one.css 128 bytes {1} [built]
   [2] ./src/feature-two.js 28 bytes {0} [built]
   [3] ./src/feature-two.css 92 bytes {0} [built]
   [4] ./node_modules/css-loader?{"modules":true}!./src/feature-one.css 391 bytes [built]
   [6] ./src/logo.svg 82 bytes [built]
   [9] ./node_modules/css-loader?{"modules":true}!./src/feature-two.css 270 bytes [built]
    + 3 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--0-2!src/feature-two.css:
       [0] ./node_modules/css-loader?{"modules":true}!./src/feature-two.css 270 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--0-2!src/feature-one.css:
     1 asset
       [0] ./node_modules/css-loader?{"modules":true}!./src/feature-one.css 391 bytes {0} [built]
       [2] ./src/logo.svg 82 bytes {0} [built]
        + 1 hidden module
Done in 1.10s.

>纱线网页包
$“/node\u modules/.bin/webpack”
块信息{
“区块id#0”：{
“模块”：{
"2": {
“文件路径”：[
“/src/feature two.js”
]
},
"3": {
“文件路径”：[
“/src/feature two.css”，
“/node_modules/css loader/lib/css base.js”，
“/src/feature two.css”
]
}
},
“文件”：[
“feature two.js”，
“功能2.css”
]
},
“区块id#1”：{
“模块”：{
"0": {
“文件路径”：[
“/src/feature one.js”
]
},
"1": {
“文件路径”：[
“/src/feature one.css”，
“/node_modules/css loader/lib/css base.js”，
“/src/feature one.css”，
“/src/logo.svg”
]
}
},
“文件”：[
“FeatureOne.js”，
“功能1.css”
]
}
}
散列：9d8603d6b25981dfd88f
版本：网页3.5.5
时间：403ms
资产大小块块名称
2baa77d6015e6de6adf1ffa247530568.svg 679字节[已发出]
feature-two.js 3.01 kB 0[emissed]功能二
feature-one.js 3.23 kB 1[已发出]feature-one
feature-one.css 136字节1[发出]feature-one
feature-2.css 50字节0[发出]feature-2
[0]./src/feature-one.js 142字节{1}[builded]
[1] ./src/feature-one.css 128字节{1}[编译]
[2] ./src/feature-two.js 28字节{0}[编译]
[3] ./src/feature-two.css 92字节{0}[编译]
[4] ./node_modules/css加载器？{“modules”：true}/src/feature-one.css 391字节[内置]
[6] ./src/logo.svg 82字节[内置]
[9] ./node_modules/css加载器？{“modules”：true}/src/feature-two.css 270字节[内置]
+3隐藏模块
Child extract text webpack plugin node_modules/extract text webpack plugin/dist node_modules/css loader/index.js？？ref--0-2！src/feature-two.css：
[0]。/节点\模块/css加载器？{“模块”：true}/src/feature-two.css 270字节{0}[编译]
+1隐藏模块
Child extract text webpack plugin node_modules/extract text webpack plugin/dist node_modules/css loader/index.js？？ref--0-2！src/feature-one.css：
1资产
[0]。/节点\模块/css加载器？{“模块”：true}/src/feature-one.css 391字节{0}[编译]
[2] ./src/logo.svg 82字节{0}[编译]
+1隐藏模块
在1.10秒内完成。

我的期望是chunk#1（即功能1）的

文件
数组将包括
logo.svg
，但它没有

我不确定哪种方法最合理或最受支持，可以发现一个人的依赖关系图包括
logo.svg
文件，但是
最终，这就是我的目标——获得给定入口点或区块的所有直接+可传递资产依赖项的列表