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 automaticall

Answer 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.