import/dynamic-import-chunkname

webpack puts the target of each import() in its own file. Without a webpackChunkName comment, a production build names that file with a number, such as 472.js, which tells you nothing in a network tab or a bundle report.

The comment goes inside the parentheses, before the path. It must be a block comment with one space after /* and one before */. An import with webpackMode: "eager" doesn't make a chunk, so it doesn't need a name, and giving it one is reported too.

Configure

Off by default. To turn it on:

[lint.rules]
"import/dynamic-import-chunkname" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

[lint.rules]
"import/dynamic-import-chunkname" = ["error", {
  importFunctions = [], # list of strings
  allowEmpty = false,
  # webpackChunknameFormat = <string>,
}]

Examples

Reported:

const settings = await import("./pages/settings.js");

const settings = await import(
  // webpackChunkName: "settings"
  "./pages/settings.js"
);

const settings = await import(/*webpackChunkName: "settings"*/ "./pages/settings.js");

const settings = await import(
  /* webpackChunkName: "settings", webpackMode: "eager" */
  "./pages/settings.js"
);

Not reported:

const settings = await import(/* webpackChunkName: "settings" */ "./pages/settings.js");

const admin = await import(
  /* webpackChunkName: "admin", webpackPrefetch: true */
  "./pages/admin.js"
);

const icons = await import(/* webpackMode: "eager" */ "./icons.js");

Options

Option	Default	What it does
importFunctions	[]	Names of functions that are checked like import().
allowEmpty	false	Allow an import without a chunk name. A malformed comment is still reported.
webpackChunknameFormat	"([0-9a-zA-Z-_/.]|\[(request|index)\])+"	A regular expression that the chunk name must match.

const settings = lazyLoad("./pages/settings.js");

const settings = await import("./pages/settings.js");

const settings = await import(/*webpackPrefetch: true*/ "./pages/settings.js");

const settings = await import(/* webpackChunkName: "settings" */ "./pages/settings.js");

const settings = await import(/* webpackChunkName: "page-settings" */ "./pages/settings.js");

When not to use it

The comment only matters to webpack and to bundlers that read webpack's comments. If you bundle with bun build, leave this rule off.