How to Find the Chunks for a Webpack Entry

Question

I'm using webpack to modernize a legacy multiple-page ASP.NET Web Forms application. I've had pretty good success with it up till I tried using the SplitChunksPlugin to de-dupe my bundles using its chunks: 'all' option. This unfortunately makes a handful of extra JS bundles that all need to be included in script tags along with the original entry bundle. No surprise, the above linked doc states as much:

By default [the plugin] only affects on-demand chunks, because changing initial chunks would affect the script tags the HTML file should include to run the project.

But I would very much like to have those initial entry chunks split up, so I'm trying to find a way of getting all those extra chunks included in script tags. It seems the standard advice here is to use the HtmlWebpackPlugin to generate an HTML page with all the script tags included, but this doesn't work for me (at least in its default configuration) for at least two reasons:

1. This is a Web Forms project. One does not simply tamper with aspx files.
2. Even if I did find a way to generate some valid aspx files every time I ran webpack (I suppose that's doable, but here is the main difficulty); it seems HtmlWebpackPlugin only generates script tags for all the chunks, or a manually selected subset of them (using the chunks: [] option).

To elaborate on that second point, and get to my question -- I could do some manual analysis of the split chunks to build a dependency graph and manually include each one in the aspx, but that's obviously not a maintainable approach. I was hoping HtmlWebpackPlugin could offer some way of at least indicating that this chunk is ultimately used by this entry, or this entry uses these chunks, etc., but I have not found any such relationships present in its output.

Is there any way without going through hack-hoops to automatically determine which of the split chunks are dependencies of a given entry chunk?

Pythian

Did you ever get to the bottom of this? You seem to be the only other person I’ve seen with this problem, even though it seems like a fairly basic use case – Estrogen

Answer 1

Install this plugin with option to your webpack config:

npm install webpack-manifest-plugin --save-dev

// webpack.config.js

const ManifestPlugin = require('webpack-manifest-plugin')

concatMerge(configuration, {
  // ...
  plugins: [
    new ManifestPlugin({
      fileName: 'prod.manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set()
        files.forEach(
          (file) => ((file.chunk || {})._groups || []).forEach(
            (group) => entrypoints.add(group)
          )
        )
        const entries = [...entrypoints]
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = (entry.options || {}).name
            || (entry.runtimeChunk || {}).name
          const files = [].concat(
            ...(entry.chunks || []).map((chunk) => chunk.files)
          ).filter(Boolean)
          return name ? {...acc, [name]: files} : acc
        }, seed)
        return entryArrayManifest
      }
    }),
  ],
}

It will generate a prod.manifest.json contain chunks for every entry or routes:

{
  "entryOne": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.common.d7791ce7a1e7ba394.js",
    "main.entryOne.eb614be915641d465.js"
  ],
  "a-route": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.a-routes.14b91be915641d465.js"
  ]
  // ...
}

Surfacetosurface

Answer 2

More simply, for the same result as @Junior Tour you can also use the entries parameter of the generate property:

plugins: [
    new WebpackManifestPlugin(
    {
        fileName: 'prod.manifest.json',
        generate: (seed, files, entries) => {
            return entries;
        }
    }),
],

Nowhither