Since [email protected] 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
}

Since [email protected] 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
}

• javascript
• webpack
• webpack-3

• 1 I just post as ment 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 ment webpackChunkName – Ematipico Commented Jul 4, 2017 at 14:21
• May i see your full answer:) ? @Ematipico – NeoZoom.lua Commented Sep 1, 2017 at 10:19
• 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 ment like I did in first snippet, but unfortunately this has to be done for each imported module separately. – van_folmert Commented Sep 1, 2017 at 14:52
• Did you try using the callback function for chunkFilename? I have no idea what webpack.js/configuration/output/#outputchunkfilename. The interface of the function is function (pathData, assetInfo) => string – Leif Marcus Commented Jul 30, 2021 at 11:05
• Another option is to look into webpack.js/configuration/output/#template-strings and see if for instance [base] (containing the filename and extension) works for the chuck filename – Leif Marcus Commented Jul 30, 2021 at 11:11

1 Answer 1

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 ments. I've created magic-ments-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-ments-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 ments, including overrides based on file paths. Check out the docs.