Used to decide how to handle different types of modules in a project.
Object
{}
Rule[]
An array of rules applied by default for modules.
See source code for details.
string | string[] | RegExp | RegExp[] | ((request: string) => boolean)
undefined
Keep module mechanism of the matched modules as-is, such as module.exports
, require
, import
.
It's useful and can boost build performance when used to ignore libraries without external dependencies.
Note: these modules will still be processed by configured loaders.
Object
{}
Configure all parsers' options in one place with module.parser
.
Parser options for asset
modules.
{ maxSize: number }
{ maxSize: 8096 }
If the module size is less than or equal to maxSize
, then the module will be Base64 encoded, otherwise a file will be created. This option can be used only for Asset Module scenarios.
Parser options for javascript
modules.
'lazy' | 'eager'
'lazy'
Specifies global mode for dynamic import.
boolean | number
false
Specifies global prefetch for dynamic import.
boolean | number
false
Specifies global preload for dynamic import.
true | false | 'relative'
true
Enable parsing of new URL()
syntax.
When use 'relative', Rspack would generate relative URLs for new URL()
syntax, i.e., there's no base URL included in the result URL:
boolean | undefined
true
Enable warnings for full dynamic dependencies (import(variable)
).
boolean | undefined
false
Enable warnings for partial dynamic dependencies (import("./path/to/" + variable)
).
"error" | "warn" | "auto" | false
"auto"
Warn or error for using non-existent exports and conflicting re-exports.
"error"
: Report errors."warn"
: Report warnings."auto"
: Depending on whether the module is a strict ESM, give an error if it is, otherwise give a warning.false
: Disable this feature."error" | "warn" | "auto" | false
Warn or error for using non-existent exports, defaulting to the configuration of module.parser.javascript.exportsPresence
.
"error" | "warn" | "auto" | false
Warn or error for conflicting re-exports, defaulting to the configuration of module.parser.javascript.exportsPresence
.
Parser options for javascript/auto
modules, same as the javascript
parser options.
Parser options for javascript/dynamic
modules, same as the javascript
parser options.
Parser options for javascript/esm
modules, same as the javascript
parser options.
Parser options for css/auto
modules.
This configuration will only take effect when experiments.css = true
.
boolean
true
Use ES modules named export for CSS exports.
When using namedExports: true
, you can use namespace export or named export:
When using namedExports: false
, in addition to namespace export and named export, default export can also be used:
Parser options for css
modules.
This configuration will only take effect when experiments.css = true
.
Same as module.parser["css/auto"].namedExports
.
Parser options for css/module
modules.
This configuration will only take effect when experiments.css = true
.
Same as module.parser["css/auto"].namedExports
.
Object
{}
Configure all generators' options in one place with module.generator
.
Generator options for asset
modules.
Object | (options: { content: string, filename: string }) => string
{}
Only for modules with module type 'asset'
or 'asset/inline'
.
When used a a function, it executes for every module and must return a data URI string.
false | 'base64'
'base64'
When set to 'base64', module source will be encoded using Base64 algorithm. Setting encoding to false will disable encoding. Only for modules with module type 'asset'
or 'asset/inline'
.
string
require('mime-types').lookup(ext)
A mimetype for data URI. Resolves from module resource extension by default. Only for modules with module type 'asset'
or 'asset/inline'
.
string
undefined
output.assetModuleFilename
Same as output.assetModuleFilename
. Overrides output.assetModuleFilename
and only works for asset
and asset/resource
module types.
string
undefined
Override output.publicPath
, only for modules with module type 'asset'
or 'asset/resource'
.
boolean
true
Whether to output assets to disk. You can set this option to false
to avoid outputting unnecessary files for some scenarios such as SSR.
Only for modules with module type 'asset'
or 'asset/resource'
.
'asset'
:'asset/resource'
:Generator options for asset/inline
modules.
Same as module.generator["asset"].dataUrl
.
Same as module.generator["asset"].dataUrl.encoding
.
Same as module.generator["asset"].dataUrl.mimetype
.
Generator options for asset/resource
modules.
Same as module.generator["asset"].filename
.
Same as module.generator["asset"].publicPath
.
Generator options for css/auto
modules.
This configuration will only take effect when experiments.css = true
.
'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only'
'as-is'
Customize how CSS export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
boolean
true
for node environments, false
for web environments.If true
, only exports the identifier mappings from CSS into the output JavaScript files, without embedding any stylesheets in the template. Useful if you are using CSS Modules for pre-rendering (e.g. SSR).
If false
, generate stylesheets and embed them in the template.
string
[uniqueName]-[id]-[local]
Customize the format of the local class names generated for CSS modules, besides the substitutions at File-level and Module-level, also include [uniqueName]
and [local]
.
boolean
true
This configuration is available for improved ESM-CJS interoperability purposes.
Whether to add __esModule
to the exports of CSS; if added, it will be treated as an ES Module during esm-cjs interop, otherwise, it will be treated as a CommonJS Module.
For example, a common use case, when using the cjs output from a third-party component library, it is sometimes necessary to add this configuration to ensure correct esm-cjs interop, to obtain the correct exports (this can be used in conjunction with Rule.test and other matching conditions to add it only for that particular component library).
The original source code of the third-party component library:
The cjs format output published by the third-party component library:
Generator options for css
modules.
This configuration will only take effect when experiments.css = true
.
Same as module.generator["css/auto"].exportsConvention
.
Same as module.generator["css/auto"].exportsOnly
.
Same as module.generator["css/auto"].esModule
.
Generator options for css/module
modules.
This configuration will only take effect when experiments.css = true
.
Same as module.generator["css/auto"].exportsConvention
.
Same as module.generator["css/auto"].exportsOnly
.
Same as module.generator["css/auto"].localIdentName
.
Same as module.generator["css/auto"].esModule
.
Rule[]
[]
An array of rules that match the module's requests when it is created. These rules can modify the creation behavior of the module. They can apply Loader, etc. to the module.
Rule
{}
Rule defines the conditions for matching a module and the behavior of handling those modules.
Rule behavior
Defines the processing behavior of the corresponding matching module, e.g. :
Rule.use
)Rule.type
)Rule.resolve
)string | RegExp | Condition[] | LogicalConditions
Defines a module's match conditions, common matches are resource
, resourceQuery
, include
, and exclude
.
Example: app.js imports ./image.png?inline#foo
resource
is /path/to/image.png
, and will match against with Rule.resource
ConditionresourceQuery
is ?inline
, and will match against with Rule.resourceQuery
ConditionresourceFragment
is #foo
, and will match against with Rule.resourceFragment
ConditionCondition represents the form of matching a given input, and it supports the following types:
String
: Given an input, the match is successful when the input string satisfies startsWith. Note: You can think of it as input.startsWith(condition)
.RegExp
: Given an input, the match is successful when the input string satisfies the regular expression. Note: You can think of it as condition.test(input)
.Condition[]
: A list of conditions. At least one of the Conditions must match.LogicalConditions
: All Conditions must match.
{ and: Condition[] }
: All Conditions must match.{ or: Condition[] }
: At least one of the Conditions must match.{ not: Condition }
: All Conditions must NOT match.(value: string) => boolean
: If it's called with the input and return a truthy value, the match is succeeds.Nested Rule can be specified under the properties Rule.rules
and Rule.oneOf
, These rules are evaluated only when the parent Rule condition matches. Each nested rule can contain its own conditions.
The order of evaluation is as follows:
Rule.rules
Rule.oneOf
Condition
undefined
Excludes all modules that match this condition and will match against the absolute path of the resource (without query and fragment). This option cannot be present together with Rule.resource
.
Condition
undefined
Matches all modules that match this condition against the absolute path of the resource (without query and fragment). This option cannot be present together with Rule.resource
.
Condition
undefined
Matches all modules that match this resource, and will match against Resource (the absolute path without query and fragment). This option cannot be present together with Rule.test
.
Condition
undefined
Matches all modules that match this resource against the Resource's query. Note: Containing ?
, when Rule.resourceQuery
is ?raw
, it will match the resource request of foo?raw
Condition
undefined
Matches all modules that match this resource against the Resource's fragment. Note: Containing #
, when Rule.resourceFragment
is #abc
, it will match the resource request of foo#abc
Condition
undefined
Matches all modules that match this resource, and will match against Resource (the absolute path without query and fragment). This option cannot be present together with Rule.resource
.
Condition
undefined
Matches all modules that match this resource, and will match against Resource (the absolute path without query and fragment) of the module that issued the current module.
Condition
undefined
Matches all modules that match this resource, and will match against the category of the dependency that introduced the current module, for example esm
for import
and import()
, cjs
for require()
, url
for new URL()
and url()
.
Condition
undefined
Matches all modules that match this resource, and will match against the Resource's scheme.
For example, you can treat the inline data uri resource as a separate resource with the following configuration:
Condition
undefined
Matches all modules that match this resource, and will match against the Resource's mimetype.
{ [key: string]: Condition }
undefined
descriptionData
option allows you to match values of properties in the description file, typically package.json
, to determine which modules a rule should apply to. This is a useful way to apply rules to specific modules based on metadata found in their package.json
.
The object keys in descriptionData
correspond to keys in the module's package.json
, such as name
, version
, etc. Each key should be associated with a Condition
for matching the package.json
data.
For example, below we are applying the rule only to JavaScript resources with 'rspack'
string included in their package.json
name
.
This option is deprecated, please use Rule.use
instead
Rule.loader
is a shortcut to Rule.use: [ { loader } ]
. See Rule.use for details.
Rule.options
is a shortcut to Rule.use: [ { options } ]
. See Rule.use for details.
Object
{}
Parser options for the specific modules that matched by the rule conditions, this will override the parser options in module.parser
.
For specific parser options and the corresponding module type, you can refer to module.parser
.
Object
{}
Generator options for the specific modules that matched by the rule conditions, this will override the parser options in module.generator
.
For specific generator options and the corresponding module type, you can refer to module.generator
.
boolean
Flag the module for side effects
'javascript/auto' | 'typescript' | 'css' | 'css/module' | 'css/auto' | 'json' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'
Used to mark the type of the matching module, which affects how the module is handled by Rspack's built-in processing. For example, when a module is marked as 'typescript'
then the module is processed using the TS parser/generator.
'javascript/auto'
: JavaScript modules, supported module systems: CommonJS, ESM, no plans for AMD module support at this time.'javascript/esm'
:JavaScript modules, treated as ES Module.'javascript/dynamic'
:JavaScript modules, treated as Script.'typescript'
: TypeScript module (🚧 deprecated, checkout experiments.rspackFuture.disableTransformByDefault for more details)'css'
: CSS module'css/module'
: CSS Modules module'css/auto'
: CSS Modules module if filename matches /\.module(s)?\.[^.]+$/
, otherwise CSS module'json'
: JSON data module'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'
: See Asset ModuleAn array to pass the Loader package name and its options. string[]
e.g.: use: ['svgr-loader']
is shorthand for use: [ { loader: 'svgr-loader' } ]
.
Loaders will be executed in right-to-left order.
A function can also be used:
Set specific module resolve options based on the matching modules
Rule[]
undefined
A kind of Nested Rule, an array of Rules that is also used when the parent Rule matches.
Rule[]
undefined
A kind of Nested Rule, an array of Rules from which only the first matching Rule is used when the parent Rule matches.