Listing all transitive dependencies used to build a webpack chunk

424 views Asked by At

I've created a demonstration of the problem I'm having on my github account.

I have a webpack config with two entry points -- "feature-one" and "feature-two". "feature-one" includes a CSS file, which itself includes a logo: logo.svg.

When webpack runs over this code, the logo.svg file will be included in the dist/ folder.

At the "emit" phase of webpack, chunks can be inspected for every entry-point.

A Chunk class has a files property, which should list all files involved in the chunk. When inspected, we can see that feature-one.js and feature-one.css are referenced, but logo.svg is not.

In contrast, a Module class has a fileDependencies property which lists all filepaths involved, and this list does include the (fully-qualified path) to the logo.svg file. The modules involved in a chunk are accessible via Chunk's modules property.

Here's the webpack output of the example:

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

My expectation is that the files array for chunk #1 (i.e., feature-one) would include logo.svg, but it doesn't.

I'm not sure what's the most reasonable or supported way of discovering that feature-one's dependency graph includes the logo.svg file, but ultimately that's my goal -- to get a list of all the direct + transitive asset dependencies for a given entry-point or chunk.

0

There are 0 answers