code splitting multiple vendor chunks

artivilla commented 5 years ago

webpack version "webpack": "4.22.0", Currently the manifest file only generates the following format for multiple entries and the default split chunks configuration:

"betafeatures.js": "betafeatures.2831f9f50a728690c4e9.js",
  "bundles.js": "bundles.41bd97d651031530e018.js",
  "campaigns.js": "campaigns.cab2d95367d6dd3b91bf.js",
  "companypage.js": "companypage.da9cbfde44a9d5a72e9d.js",
  "compliancerulesets.js": "compliancerulesets.c91061df639420340034.js",
  "dashboard.js": "dashboard.1ee0f59a349478e8e23b.js",

With splitting the vendors, the entrypoints definitely output a list of chunks associated per entry:

Entrypoint admin [big] = manifest.c231329d4177a1a8c5cb.js vendors.f39c69ba12bc2c5e9fe9.js admin.6e23bcabf8a7011a3257.js
Entrypoint addressbook [big] = manifest.c231329d4177a1a8c5cb.js vendors.f39c69ba12bc2c5e9fe9.js addressbook.3677f81bcfd6f1ee9e4a.js
Entrypoint assignments [big] = manifest.c231329d4177a1a8c5cb.js vendors.f39c69ba12bc2c5e9fe9.js assignments.80693c6b35036683bb2f.js

Any way I can get the entire list added to the manifest?

koganei commented 5 years ago

I have this issue as well. The main blocker for me is that when you have enough entry points, the names of chunks which need to be loaded for multiple entry points truncate, so I can't use the name to understand which file goes to which entry point. I tried to specify my own generate function to add the entry point names to the output, but it doesn't seem to be available in the FileDescriptor type or the Chunk type. Is there any way that we can have this information available to us?

koganei commented 5 years ago

I was able to find the entry point in the generate data after all, using fancy node debugging. My ManifestPlugin call now looks like this:

new ManifestPlugin({
          generate: (seed, files) =>
            files.reduce((manifest, file) => {
                const fileData = { path: file.path };
                if (file.chunk && file.chunk.groupsIterable) {
                  fileData.entries = [];
                  for(group of file.chunk.groupsIterable) {
                      if(group.options && group.options.name) {
                          fileData.entries.push(group.options.name);
                      }
                  }
                }
              return {
                ...manifest,
                [file.name]: fileData
              };
            }, seed)
        })

SKalt commented 5 years ago

To generate a manifest like

{[entry_name]: ['ordered.js', 'list.js', 'of.js', 'chunks.js']}

I've got the following options.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
}

This results in something like

{
  "foo": [
    "vendors~bar~foo.a1258721c436b463b51d.js",
    "foo.78f40b8c23cc6cbf3fa7.js"
  ],
  "bar": [
    "vendors~bar~foo.a1258721c436b463b51d.js",
    "bar.a07432c2585ba2ae3d31.js"
  ]
}

which is pretty much what is what webpack outputs:

Entrypoint foo = vendors~bar~foo.a1258721c436b463b51d.js foo.78f40b8c23cc6cbf3fa7.js
Entrypoint bar = vendors~bar~foo.a1258721c436b463b51d.js bar.a07432c2585ba2ae3d31.js

EDIT: none of the entryPointInstance.files have the output.publicPath prepended. You may have to prepend the public paths manually.