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.

This is specific to Webpack and NOT related to TypeScript – Yves M. Mar 02 '20 at 09:41 — Yves M., Mar 02 '20 at 09:41

score 67 · Accepted Answer · edited Nov 10 '22 at 16:00

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.

This is perfect .... is there a way to lowercase the file names? Right now I'm getting `Team-Form.js` which is still WAY better than having the whole path, but lowercase would be preferred. — secondman, Mar 12 '21 at 23:11
@VinceKronlein Not really sure if that's possible. Chunk name will be same as the file name. — Murli Prajapati, Mar 13 '21 at 15:14
Actually now with WebPack 5 you can output chunkFilename as a function and do transformations there. ``` chunkFilename: (pathData) => { let name = pathData.chunk.name.toLowerCase() pathData.chunk.name = name return 'js/[name].js?id=[chunkhash]' } ``` — secondman, Mar 13 '21 at 22:28

score 1 · Answer 2 · answered Feb 11 '21 at 12:38

1

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

answered Feb 11 '21 at 12:38

user2899918

76
3

This is a good strategy for cache busting by adding a hash to your file, but it will not remove the file path to your files that gets generated by importing. For instance let's say your js files are located at `assets/js` and you have a Vue component called Layout. Chunking will produce the file `assets_js_Layout_vue.js` and it gets longer as you nest further. Using the magic comment with let you specify what you want the file to be named. – secondman Mar 13 '21 at 21:14

How to generate dynamic import chunk name in Webpack

2 Answers2

Linked