Customizable webpackChunkName

[aczekajski]

🚀 Feature Proposal

Babel plugin which currently is responsible for automatically generating "webpackChunkName" magic comment (if none is provided by the user) should allow for custom logic for the chunk name generation.

Motivation

Currently the chunk name is generated solely based on the string passed to the import(...). If two completely different places in the project happen to import different components by the same relative path, they end up getting bundled in the same bundle. This does not happen with how webpack generates dynamic chunks names by default (when loadable is not used) as they contain the full path of the imported resource.

In essence, it's to avoid situation like this:

1. components/foo/index.ts imports ./modal using loadable
2. components/bar/index.ts imports ./modal using loadable
3. both imports are automatically annotated with /* webpackChunkName: "modal" */ by @loadable/babel-plugin
4. both components/foo/modal.ts and components/bar/modal.ts are incorrectly bundled in the same chunk (while without @loadable/babel-plugin they would be bundled separately).

Example

Providing an option to webpack plugin:

"plugins": [
  [ '@loadable/babel-plugin', {
    autoChunkName: 'importPath', // current behavior
    /* OR */
    autoChunkName: 'resourcePath', // webpack-like behavior
    /* OR */
    autoChunkName: 'resourcePathHash', // uses hash of full resource path as chunk name
    /* OR */
    autoChunkName: (importedResourcePath, sourcePath, importString) => {
      return ...; // manual full control
    },
  }]
],

would change how the chunk names are automatically generated.

Pitch

It's @loadable/babel-plugin that breaks the default webpack behavior and leads to modules being incorrectly bundled together instead of separately so it should have an option to bring the default naming scheme back.

Maybe the "manual full control" option is not neccessary (since it can be achieved via packages like magic-comments-loader) but at least option to bring the default collision-safe naming behavior back should exist.