Module | webpack

These options determine how the different types of modules within a project will be treated.
An array of rules applied by default for modules.
See source code for details.
Starting with webpack 5.87.0, falsy values including 0, "", false, null and undefined are allowed to pass to module.defaultRules to conditionally disable specific rules.
It's possible to configure all generators' options in one place with a module.generator.
When exportsConvention is a function, it may return either a string or a string[]. Returning an array exports the local class under every name in the array. This is useful when you want to expose the same class under several aliases without writing two rules.
Skip generating and loading a stylesheet and only embed the exports of a CSS module — the mapping from a local class name to its generated one — into the JavaScript output. This is what a server-side build wants, where the styles are shipped by the client build and the server only needs the names.
Generate the exports of a CSS module with ES module syntax, so they can be tree-shaken and concatenated. Set it to false to emit CommonJS exports instead.
boolean = true 'inline'
Controls whether an HTML module emits its parsed and URL-rewritten HTML as a standalone .html output file alongside the module's JavaScript export, mirroring the CSS extraction pipeline. Requires experiments.html.
When unset, extraction defaults to true for HTML modules used as compilation entries (HTML entry points) and false for HTML modules imported from JavaScript. The emitted filenames follow output.htmlFilename and output.htmlChunkFilename.
Similar to the module.generator, you can configure all parsers' options in one place with a module.parser.
Configure options for the CSS parser.
This option enables the handling of @import at-rules in CSS files. When set to true, @import statements are processed, allowing modular inclusion of styles from other CSS files.
To filter specific imports, you can use Webpack's built-in IgnorePlugin. A per-import filter option is not supported.
This option enables or disables the handling of URLs in functions such as url(), image-set(), src(), and image() within CSS files. When enabled, these URLs are resolved and processed by webpack.
To filter specific imports, you can use Webpack's built-in IgnorePlugin. A per-import filter option is not supported.
This option enables the use of ES modules named export for CSS exports. When set to true, the CSS module will export its classes and styles using named exports.
When namedExports is false for CSS modules, you can retrieve CSS classes using various import methods. Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:
When namedExports is enabled (default behavior), you can use only named exports to import CSS classes.
By enabling namedExports, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.
Enable strict pure mode for CSS Modules. Every selector must contain at least one local class or id selector; otherwise webpack emits a build error. This mirrors the pure mode of postcss-modules-local-by-default and helps catch accidentally global selectors early.
Two comments opt out of the check when needed.
/* cssmodules-pure-ignore */ placed directly before a rule suppresses the check for that single rule. The suppression is per-rule and is not propagated to children.
/* cssmodules-pure-no-check */ placed among the leading comments of a file (before any rule) disables the check for the whole file.
Some constructs are exempt by design: nested rules inside a local-bearing ancestor are treated as pure-compliant, & resolves to the parent rule's purity, and @keyframes and @counter-style body contents are not checked.
Enable or disable renaming of @keyframes animation names in CSS modules. Only available for the css/auto, css/module and css/global module types.
Enable or disable renaming of @container names in CSS modules. Only available for the css/auto, css/module and css/global module types.
Enable or disable renaming of custom identifiers in CSS modules. Only available for the css/auto, css/module and css/global module types.
Since webpack 5.109.0 this also scopes view-transition-name / view-transition-group / view-transition-class names and ::view-transition-*() pseudo-element references.
Enable or disable resolution of @custom-media at-rules in native CSS, a file-local build-time substitution. Media-type values are supported as well.
Enable or disable resolution of @custom-selector at-rules in native CSS, a file-local build-time expansion to :is(...).
Enable or disable renaming of dashed identifiers, such as CSS custom properties (e.g., --my-variable). Only available for the css/auto, css/module and css/global module types.
Enable or disable renaming of @function names in CSS modules. Only available for the css/auto, css/module and css/global module types.
Auto-emit <link rel="preload" as="font"> for the primary src URL of each @font-face reachable from an HTML entry's initial CSS. Only the first URL per @font-face is preloaded, since preloading every format would double-download. module.parser.css.urlHints rules and per-URL magic comments still override the seeded defaults.
Preload links for fonts must match the font's CORS fetch, so set output.crossOriginLoading accordingly.
Default resource-hint rules for assets referenced via url(...) in CSS. Same rule format as module.parser.javascript.urlHints.
Enable or disable renaming of grid identifiers in CSS modules. Only available for the css/auto, css/module and css/global module types.
Configure how CSS content will be exported.
Type: 'link' | 'text' | 'css-style-sheet' | 'style'