Friendly chunk names for shared dependencies

[eslawski]

Using ModuleFederationPlugin, I understand that when you specify a dependency to be shared then webpack will automatically split that out into its own chunk. When it does that, by default it gives it a pretty ugly name like 1049.5b8f2f276b12bc0ddf9c.js.

This makes it hard to glean what the chunk even is (via the network tab within devtools). Furthermore, it can make it difficult to prove that module sharing is working as you'd expect. Are we loading more than one version of Vue on the page? Are the opportunities for better sharing on our page? Are we loading code that we shouldn't? etc.

It'd be amazing if there was a way to name the chunks generated from the shared config. For example:

• import { createApp } from "vue";
  • Generates a chunk like vue_3_2_26.[hash].js
• import { SomeButton } from "design-system/lib/components/some-button"
  • Generates a chunk like design-system_1_2_3_some-button.[hash].js

I messed around awhile with the chunkFilename config to try and accomplish this, but am quickly exceeding my Webpack expertise. Was wondering if anyone has been able to solve something like this? Feels like it could be a real game-changer to gain this additional observability.

Thanks!

[sowtame]

ping

[ScriptedAlchemy]

use enhanced plugin if you still are using webpack.container.modulefederation, switch to module-federation/enhanced package, i believe we set this already, alternatively its optimization.chunkIds and google the options you can pass, theres a few. named is probs what you are looking for.