How to generate dynamic import chunk name in Webpack

Question

I am dynamically calling an import statement in my TypeScript code, based on that Webpack will create chunks like below:

You can see Webpack is automatically generating the file name as 1, 2, 3 respectively, the name is not a friendly name.

I have tried a way to provide the chunk name through comment, but it's generating modulename1.bundle.js , modulename2.bundle.js

bootStrapApps(config) {

    config.apps.forEach(element => {

      registerApplication(
        // Name of our single-spa application
        element.name,
        // Our loading function
        () =>
          import(/* webpackChunkName: "modulename"*/  "../../" +
            config.rootfolder +
            "/" +
            element.name +
            "/" +

            "app.bootstrap.js"),
        // Our activity function
        () => true
      );
    });
    start();
}

Is there any way to specify the module name dynamically though this comment? I don't know this is specific to TypeScript or Webpack.

Solution 1

From webpack docs:

webpackChunkName: A name for the new chunk. Since webpack 2.6.0, the placeholders [index] and [request] are supported within the given string to an incremented number or the actual resolved filename respectively.

You can use [request] placeholder to set dynamic chunk name.
A basic example would be:

const cat = "Cat";
import(
  /* webpackChunkName: "[request]" */
  `./animals/${cat}`
);  

So the chunk name will be Cat. But if you put the string Cat in the path, [request] will throw a warning during the build saying request was undefined.
So this will not work:

import(
  /* webpackChunkName: "[request]" */
  "./animals/Cat"
);  

Finally, your code would look something like this:

bootStrapApps(config) {
    config.apps.forEach((element) => {
      registerApplication(
        // Name of our single-spa application
        element.name,
        // Our loading function
        () =>
          import(/* webpackChunkName: "[request]" */ `../../${config.rootfolder}/${
            element.name
          }/app.bootstrap.js`),
        // Our activity function
        () => true
      );
    });
    start();
  }  

Look at this GitHub issue for more help. https://github.com/webpack/webpack/issues/4807

PS: Those comments are called webpack magic comments.

Solution 2

You also can use chunkFilename in webpack config file.

It's available with babel-plugin-syntax-dynamic-import.

It seems to me chunkFilename in config is more convenient sometimes than webpackChunkName in each file

See details in https://medium.com/@anuhosad/code-splitting-in-webpack-with-dynamic-imports-4385b3760ef8