How to set webpackChunkName for import() globally?

Question

Since Webpack@3.0.0 we have this great feature which enables named chunk files:

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy-once" */
  'module'
);

However, I'm at the point where I have 40 imports like this and changing each one of them is kind of a hassle.

Is there any way to define webpackChunkName and webpackMode globally for all chunks?

I imagine something like this in webpack.config.js:

output: {
    filename:      'js/[name].js',
    chunkFilename: 'js/[filename].js' // so that import('module') creates module.js
    chunkMode:     'lazy-once' // so I can override default `lazy` option once and for all
}

I just post as comment as I am not sure of the answer, but if I remember correctly `chunkFilename` is the generic way to name the chunks. If you want to override it, you use the new magic comment `webpackChunkName` — Ematipico, Jul 04 '17 at 14:21
It's not possible with `chunkFilename`, this option accepts only: `[name]`, `[id]` and `[chunkhash]` placeholders, and `[name]` is taken from output bundle filename, not from the imported module filename. The only way to override it is by magic comment like I did in first snippet, but unfortunately this has to be done for each imported module separately. — van_folmert, Sep 01 '17 at 14:52
Did you try using the callback function for `chunkFilename`? I have no idea what https://webpack.js.org/configuration/output/#outputchunkfilename. The interface of the function is `function (pathData, assetInfo) => string` — Leif Marcus, Jul 30 '21 at 11:05
Another option is to look into https://webpack.js.org/configuration/output/#template-strings and see if for instance `[base]` (containing the filename and extension) works for the chuck filename — Leif Marcus, Jul 30 '21 at 11:11
@van_folmert if you still have a need for this you should check out [magic-comments-loader](https://www.npmjs.com/package/magic-comments-loader). — morganney, Sep 13 '21 at 00:17

morganney · Answer 1 · 2023-07-16T19:13:28.360

Is there any way to define webpackChunkName and webpackMode globally for all chunks?

No, not as a built-in webpack configuration option. You might be able to use the SplitChunksPlugin and optimization.splitChunks.cacheGroups to appropriately name your dynamic imports, but that would only cover webpackChunkName.

You can use a loader to cover all magic comments. I've created magic-comments-loader for this purpose.

The loader can be used like this:

src

import('module.js')

webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'magic-comments-loader',
        options: {
          webpackChunkName: true,
          webpackMode: 'lazy'
        }
      }
    }
  ]
}

build

import(/* webpackChunkName: "module", webpackMode: "lazy" */ 'module.js')

You can use the loader options to further configure the magic comments, including overrides based on file paths. Check out the docs.

How to set webpackChunkName for import() globally?

1 Answers1