3

我已经创建了一个我在我的 github 帐户上遇到的问题的演示。

我有一个带有两个入口点的 webpack 配置——“功能一”和“功能二”。“feature-one”包含一个 CSS 文件，该文件本身包含一个徽标：logo.svg.

当 webpack 运行此代码时，该logo.svg文件将包含在该dist/文件夹中。

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

一个Chunk类有一个files属性，它应该列出块中涉及的所有文件。检查时，我们可以看到feature-one.js并被feature-one.css引用，但logo.svg不是。

相反，一个Module类有一个fileDependencies属性，它列出了所有涉及的文件路径，这个列表 确实包括文件的（完全限定的路径）logo.svg。块中涉及的模块可以通过Chunk'modules属性访问。

这是示例的 webpack 输出：

> 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.

我的期望是files块＃1（即功能一）的数组将包括logo.svg，但它没有。

我不确定发现特征的依赖关系图包含logo.svg文件的最合理或受支持的方法是什么，但最终这是我的目标——获取给定入口点的所有直接 + 传递资产依赖项的列表或块。

4

0 回答 0