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.
– Yves M.

2020-03-02 09:41:20 +00:00
Commented Mar 2, 2020 at 9:41 — Yves M.
– Yves M., Commented Mar 2, 2020 at 9:41

zcoop98 · Accepted Answer · 2022-11-10 16:00:58Z

74

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.

edited Nov 10, 2022 at 16:00

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

answered Sep 15, 2018 at 14:52

Murli Prajapati

9,8535 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

secondman Over a year ago

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.

Murli Prajapati Over a year ago

@VinceKronlein Not really sure if that's possible. Chunk name will be same as the file name.

secondman Over a year ago

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]' } ```

user2899918 · Accepted Answer · 2021-02-11 12:38:58Z

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, 2021 at 12:38

user2899918

763 bronze badges

1 Comment

secondman Over a year ago

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.

Collectives™ on Stack Overflow

How to generate dynamic import chunk name in Webpack

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related