#Module

Used to decide how to handle different types of modules in a project.

• Type: Object
• Default: {}

#module.defaultRules

• Type: Rule[]

An array of rules applied by default for modules.

See source code for details.

export default {
  module: {
    defaultRules: [
      '...', // you can use "..." to reference those rules applied by webpack by default
    ],
  },
};

#module.noParse

• Type: string | string[] | RegExp | RegExp[] | ((request: string) => boolean)
• Default: 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.

export default {
  module: {
    noParse: /typescript|watermark-dom/,
  },
};

import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

export default {
  module: {
    noParse: [require.resolve('typescript'), /watermark-dom/],
  },
};

export default {
  module: {
    noParse: request => /typescript|watermark-dom/.test(request),
  },
};

#module.parser

• Type: Object
• Default: {}

Configure all parsers' options in one place with module.parser.

export default {
  module: {
    parser: {
      // Parser options for asset modules
      asset: {
        dataUrlCondition: {
          maxSize: 16192,
        },
      },
      // Parser options for javascript modules
      javascript: {
        dynamicImportMode: 'lazy',
        dynamicImportPrefetch: false,
        dynamicImportPreload: false,
        url: true,
        importMeta: true,
      },
      // Parser options for CSS modules
      css: {
        namedExports: true,
      },
      // Parser options for css/auto modules
      'css/auto': {
        namedExports: true,
      },
      // Parser options for css/module modules
      'css/module': {
        namedExports: true,
      },
    },
  },
};

#module.parser.asset

Parser options for asset modules.

export default {
  module: {
    parser: {
      asset: {
        // options
      },
    },
  },
};

#module.parser.asset.dataUrlCondition

• Type: { maxSize: number }
• Default: { 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 modules.

export default {
  module: {
    parser: {
      asset: {
        dataUrlCondition: {
          // Modules' size smaller than or equal to 4KB will be Base64 encoded.
          maxSize: 4 * 1024,
        },
      },
    },
  },
};

#module.parser.javascript

Parser options for javascript modules.

export default {
  module: {
    parser: {
      javascript: {
        // options
      },
    },
  },
};

#module.parser.javascript.commonjsMagicComments

• Type: boolean
• Default:false

Enable Magic comments support for CommonJS.

export default {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true,
      },
    },
  },
};

Note that only webpackIgnore comment is supported at the moment:

const x = require(/* webpackIgnore: true */ 'x');

#module.parser.javascript.dynamicImportMode

• Type: 'lazy' | 'eager' | 'weak' | 'lazy-once'
• Default:'lazy'

Specifies global mode for dynamic import, see webpackMode for more details.

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportMode: 'eager',
      },
    },
  },
};

#module.parser.javascript.dynamicImportPrefetch

• Type: boolean | number
• Default:false

Specifies global prefetch for dynamic import, see webpackPrefetch for more details.

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportPrefetch: true,
      },
    },
  },
};

#module.parser.javascript.dynamicImportPreload

• Type: boolean | number
• Default:false

Specifies global preload for dynamic import, see webpackPreload for more details.

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportPreload: true,
      },
    },
  },
};

#module.parser.javascript.dynamicImportFetchPriority

• Type: 'low' | 'high' | 'auto'
• Default:'auto'

Specifies global fetchPriority for dynamic import, see webpackFetchPriority for more details.

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportFetchPriority: 'high',
      },
    },
  },
};

#module.parser.javascript.url

• Type: true | false | 'relative' | 'new-url-relative'
• Default:true

Enable parsing of new URL() syntax.

• true: Generate absolute URLs that include the root URL (default behavior).
• 'relative': Generate relative URLs without the root URL.
• 'new-url-relative': Generate static relative URLs that are replaced at compile-time with the correct public path.

When using 'new-url-relative', Rspack generates relative URLs that will be replaced at compile-time with the correct public path:

export default {
  module: {
    parser: {
      javascript: {
        url: 'new-url-relative',
      },
    },
  },
};

new URL('./icon.svg', import.meta.url);

// would become 👇
new URL('./icon[hash].svg', import.meta.url);

When using 'relative', Rspack generates runtime code to calculate relative URLs for new URL() syntax, i.e., there's no base URL included in the result URL:

export default {
  module: {
    parser: {
      javascript: {
        url: 'relative',
      },
    },
  },
};

<!-- with 'relative' -->
<img src="icon.svg" />

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/icon.svg" />

#module.parser.javascript.exprContextCritical

• Type: boolean | undefined
• Default:true

Enable warnings for full dynamic dependencies (import(variable)).

export default {
  module: {
    parser: {
      javascript: {
        exprContextCritical: false,
      },
    },
  },
};

#module.parser.javascript.wrappedContextCritical

• Type: boolean | undefined
• Default:false

Enable warnings for partial dynamic dependencies (import("./path/to/" + variable)).

export default {
  module: {
    parser: {
      javascript: {
        wrappedContextCritical: false,
      },
    },
  },
};

#module.parser.javascript.unknownContextCritical

• Type: boolean | undefined
• Default:true

Enable warnings when using the require function in a non-statically-analyzable way (require(variable)).

export default {
  module: {
    parser: {
      javascript: {
        unknownContextCritical: false,
      },
    },
  },
};

#module.parser.javascript.wrappedContextRegExp

• Type: RegExp | undefined
• Default:/.*/

Set a regular expression to match wrapped dynamic dependencies.

export default {
  module: {
    parser: {
      javascript: {
        wrappedContextRegExp: /\.js$/,
      },
    },
  },
};

#module.parser.javascript.importMeta

• Type: boolean
• Default:true

Enable or disable evaluating import.meta.

export default {
  module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },
};

#module.parser.javascript.exportsPresence

• Type: 'error' | 'warn' | 'auto' | false
• Default:'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.

export default {
  module: {
    parser: {
      javascript: {
        exportsPresence: 'error',
      },
    },
  },
};

#module.parser.javascript.importExportsPresence

• Type: 'error' | 'warn' | 'auto' | false

Warn or error for using non-existent exports, defaulting to the configuration of module.parser.javascript.exportsPresence.

export default {
  module: {
    parser: {
      javascript: {
        importExportsPresence: 'error',
      },
    },
  },
};

#module.parser.javascript.reexportExportsPresence

• Type: 'error' | 'warn' | 'auto' | false

Warn or error for conflicting re-exports, defaulting to the configuration of module.parser.javascript.exportsPresence.

export default {
  module: {
    parser: {
      javascript: {
        reexportExportsPresence: 'error',
      },
    },
  },
};

#module.parser.javascript.strictExportPresence

• Type: boolean

Emit errors instead of warnings when imported names don't exist in imported module.

export default {
  module: {
    parser: {
      javascript: {
        strictExportPresence: true,
      },
    },
  },
};

#module.parser.javascript.typeReexportsPresence

• Type: 'no-tolerant' | 'tolerant' | 'tolerant-no-check'
• Default: 'no-tolerant'

Controls error tolerance for type re-exports, commonly seen in these two scenarios:

// case 1:
export { TypeA } from './types';
// case 2:
import { TypeB } from './types';
export { TypeB };

When re-exporting types, since TypeA and TypeB are types but used in value namespace (export {}), Rspack will report warnings:

WARNING in ./re-exports.ts
  ⚠ ESModulesLinkingWarning: export 'TypeA' (reexported as 'TypeA') was not found in './types' (module has no exports)
   ╭─[2:0]
 1 │ // case 1:
 2 │ export { TypeA } from "./types";
   · ────────────────────────────────

WARNING in ./re-exports.ts
  ⚠ ESModulesLinkingWarning: export 'TypeB' (reexported as 'TypeB') was not found in './types' (module has no exports)
   ╭─[5:0]
 3 │ // case 2:
 4 │ import { TypeB } from "./types";
 5 │ export { TypeB };
   · ─────────────────

• 'no-tolerant': Default behavior, shows errors for type re-exports.
• 'tolerant': Tolerates type re-exports while verifying the existence of corresponding type exports in child modules. Requires coordination with rspackExperiments.collectTypeScriptInfo.typeExports from builtin:swc-loader to collect type export information.
• 'tolerant-no-check': Tolerates type re-exports without checking child modules (may incorrectly tolerate some invalid cases, though IDEs usually provide warnings). Better performance as it skeps child module checks.

export default {
  experiments: {
    typeReexportsPresence: true, // This is currently an experimental feature and requires explicit enabling
  },
  module: {
    parser: {
      javascript: {
        typeReexportsPresence: 'tolerant',
      },
    },
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: 'typescript',
                },
              },
              rspackExperiments: {
                collectTypeScriptInfo: {
                  typeExports: true, // Must be enabled in "tolerant" mode
                },
              },
            },
          },
        ],
      },
    ],
  },
};

Please refer to type reexports presence example for more details.

#module.parser.javascript.worker

• Type: string[] | boolean

Provide custom syntax for Worker parsing, commonly used to support Worklet:

export default {
  module: {
    parser: {
      javascript: {
        worker: [
          // Supports CSS paintWorklet
          'CSS.paintWorklet.addModule()',
          // Supports AudioWorklet, with the leading '*' indicating the recognition of a variable named 'context', for example:
          // let context = new AudioContext();
          // await context.audioWorklet.addModule(new URL("noise-processor.js", import.meta.url));
          '*context.audioWorklet.addModule()',
          // Extends default syntax: ["Worker", "SharedWorker", "navigator.serviceWorker.register()", "Worker from worker_threads"]
          '...',
        ],
      },
    },
  },
};

See Web Workers for more details.

#module.parser.javascript.overrideStrict

• Type: 'strict' | 'non-strict'

Override the module to strict or non-strict.

This may affect the behavior of the module (some behaviors differ between strict and non-strict), so please configure this option carefully.

export default {
  module: {
    parser: {
      javascript: {
        overrideStrict: 'strict',
      },
    },
  },
};

#module.parser.javascript.commonjs

• Type: boolean | { exports?: boolean | 'skipInEsm' }
• Default:true

Controls CommonJS-specific parser behaviour. The default true keeps Rspack's standard handling for CommonJS export mutations. Set { exports: 'skipInEsm' } to skip rewriting CommonJS export assignments when the module is evaluated as ESM, preserving the original runtime side effects. Provide false to disable CommonJS export handling entirely.

export default {
  module: {
    parser: {
      javascript: {
        commonjs: {
          exports: 'skipInEsm',
        },
      },
    },
  },
};

#module.parser.javascript.inlineConst

• Type: boolean
• Default: false

Performs cross-module inline optimization for constant exports in leaf modules of the module graph.

A common optimization case is constants.js, for example:

// constants.js
export const A = true;
// index.js
import { A } from './constants';
console.log(A ? 1 : 2);

// Bundled by Rspack: output.js
const __webpack_modules__ = {
  './index.js': __webpack_require__ => {
    // 1. A will be inlined at the usage sites.
    // 2. If all exports from constants.js are inlined, the constants.js module will be optimized away and won't appear in the final output.
    console.log(true ? 1 : 2);
  },
};

Inline optimization is applied when the constant value is:

• null or undefined
• boolean values (true or false)
• number with length <= 6
• string with length <= 6

const isProduction = process.env.NODE_ENV === 'production';

export default {
  experiments: {
    inlineConst: true, // This is currently an experimental feature and requires explicit enabling
  },
  module: {
    parser: {
      javascript: {
        inlineConst: isProduction,
      },
    },
  },
};

Since this feature relies on module export usage information (optimization.usedExports), it is recommended to enable it only when mode = "production".

Please refer to inline const example

#module.parser.javascript.jsx

• Type: boolean
• Default:false

Allow the JavaScript parser to understand JSX syntax so that parsing and minimization can operate on files that keep JSX in the final bundle.

Enable this option when you set the loader's JSX mode to "preserve" and want to defer the actual JSX transform to a later tool (for example, libraries that ship JSX output or rely on a custom JSX runtime).

export default {
  module: {
    parser: {
      javascript: {
        jsx: true,
      },
    },
  },
};

#module.parser["javascript/auto"]

Parser options for javascript/auto modules, same as the javascript parser options.

export default {
  module: {
    parser: {
      'javascript/auto': {
        // options
      },
    },
  },
};

#module.parser["javascript/dynamic"]

Parser options for javascript/dynamic modules, same as the javascript parser options.

export default {
  module: {
    parser: {
      'javascript/dynamic': {
        // options
      },
    },
  },
};

#module.parser["javascript/esm"]

Parser options for javascript/esm modules, same as the javascript parser options.

export default {
  module: {
    parser: {
      'javascript/esm': {
        // options
      },
    },
  },
};

#module.parser.json

Parser options for json modules.

export default {
  module: {
    parser: {
      json: {
        // options
      },
    },
  },
};

#module.parser.json.exportsDepth

• Type: number
• Default: production mode is Number.MAX_SAFE_INTEGER, development mode is 1

The depth of json dependency flagged as exportInfo.

export default {
  module: {
    parser: {
      json: {
        // For example, for the following json
        // {
        //   "depth_1": {
        //     "depth_2": {
        //       "depth_3": "foo"
        //     }
        //   },
        //   "_depth_1": "bar"
        // }
        // when `exportsDepth: 1`, `depth_2` and `depth_3` will not be flagged as `exportInfo`.
        exportsDepth: 1,
      },
    },
  },
};

#module.parser["css/auto"]

Parser options for css/auto modules.

export default {
  module: {
    parser: {
      'css/auto': {
        // options
      },
    },
  },
};

#module.parser["css/auto"].namedExports

• Type: boolean
• Default: true

Use ES modules named export for CSS exports.

When using namedExports: true, you can use namespace export or named export:

export default {
  module: {
    parser: {
      'css/auto': {
        namedExports: true,
      },
    },
  },
};

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';

When using namedExports: false, in addition to namespace export and named export, default export can also be used:

export default {
  module: {
    parser: {
      'css/auto': {
        namedExports: false,
      },
    },
  },
};

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';
// default export
import classes from './index.module.css';
// default export and named export
import classes, { class1, class2 } from './index.module.css';

#module.parser["css/auto"].url

• Type: boolean
• Default: true

Allow to enable/disables handling the CSS functions url.

When using url: true, Rspack will resolve the path in url function, the resolve file will be treated as an asset. When using url: false, Rspack will ignore the path in the url function, keep the content unchanged.

export default {
  module: {
    parser: {
      css: {
        url: true,
      },
    },
  },
};

#module.parser.css

Parser options for css modules.

export default {
  module: {
    parser: {
      css: {
        // options
      },
    },
  },
};

#module.parser.css.namedExports

Same as module.parser["css/auto"].namedExports.

export default {
  module: {
    parser: {
      css: {
        namedExports: true,
      },
    },
  },
};

#module.parser.css.url

Same as module.parser["css/auto"].url.

export default {
  module: {
    parser: {
      css: {
        url: true,
      },
    },
  },
};

#module.parser["css/module"]

Parser options for css/module modules.

export default {
  module: {
    parser: {
      'css/module': {
        // options
      },
    },
  },
};

#module.parser["css/module"].namedExports

Same as module.parser["css/auto"].namedExports.

export default {
  module: {
    parser: {
      'css/module': {
        namedExports: true,
      },
    },
  },
};

#module.parser["css/module"].url

Same as module.parser["css/auto"].url.

export default {
  module: {
    parser: {
      'css/module': {
        url: true,
      },
    },
  },
};

#module.generator

• Type: Object
• Default: {}

Configure all generators' options in one place with module.generator.

export default {
  module: {
    generator: {
      // Generator options for asset modules
      asset: {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for asset/inline modules
      'asset/inline': {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
      },
      // Generator options for asset/resource modules
      'asset/resource': {
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for css/auto modules
      'css/auto': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `css` modules
      css: {
        exportsOnly: false,
        esModule: true,
      },
      // Generator options for css/module modules
      'css/module': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `json` modules
      json: {
        JSONParse: true,
      },
    },
  },
};

#module.generator.asset

Generator options for asset modules.

export default {
  module: {
    generator: {
      asset: {
        // options
      },
    },
  },
};

#module.generator.asset.binary

• Type: boolean | undefined
• Default: undefined

Whether or not this asset module should be considered binary. This can be set to false to treat this asset module as text. If not set, the module type will be used to determine if the module is binary.

export default {
  module: {
    generator: {
      asset: {
        binary: false,
      },
    },
  },
};

#module.generator.asset.dataUrl

• Type: Object | (source: Buffer, context: { filename: string, module: Module }) => string
• Default: {}

Only for modules with module type 'asset' or 'asset/inline'.

export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: 'base64',
          mimetype: 'mimetype/png',
        },
      },
    },
  },
};

When used a a function, it executes for every module and must return a data URI string.

import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

export default {
  //...
  module: {
    generator: {
      asset: {
        dataUrl: ({ content }) => {
          const svgToMiniDataURI = require('mini-svg-data-uri');
          return svgToMiniDataURI(content);
        },
      },
    },
  },
};

#module.generator.asset.dataUrl.encoding

• Type: false | 'base64'
• Default: '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'.

export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: false,
        },
      },
    },
  },
};

#module.generator.asset.dataUrl.mimetype

• Type: string
• Default: 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'.

export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          mimetype: 'image/png',
        },
      },
    },
  },
};

#module.generator.asset.importMode

• Type: 'url' | 'preserve'
• Default: 'url'

If "url", a URL pointing to the asset will be generated based on publicPath. If "preserve", preserve import/require statement from generated asset.

Only for modules with module type 'asset' or 'asset/resource'.

• 'asset':

export default {
  module: {
    generator: {
      asset: {
        importMode: 'preserve',
      },
    },
  },
};

• 'asset/resource':

export default {
  module: {
    generator: {
      'asset/resource': {
        importMode: 'preserve',
      },
    },
  },
};

#module.generator.asset.filename

• Type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• Default: undefined
• Supported Template string: checkout output.assetModuleFilename

Same as output.assetModuleFilename. Overrides output.assetModuleFilename and only works for asset and asset/resource module types.

export default {
  module: {
    generator: {
      asset: {
        filename: 'static/[hash][ext]',
      },
    },
  },
};

#module.generator.asset.outputPath

• Type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• Default: undefined

Emit the asset in the specified folder relative to output.path.

Only for modules with module type 'asset' or 'asset/resource'.

export default {
  module: {
    generator: {
      asset: {
        outputPath: 'foo/',
      },
    },
  },
};

#module.generator.asset.publicPath

• Type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• Default: undefined

Override output.publicPath, only for modules with module type 'asset' or 'asset/resource'.

export default {
  module: {
    generator: {
      asset: {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};

#module.generator.asset.emit

• Type: boolean
• Default: 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':

export default {
  module: {
    generator: {
      asset: {
        emit: false,
      },
    },
  },
};

• 'asset/resource':

export default {
  module: {
    generator: {
      'asset/resource': {
        emit: false,
      },
    },
  },
};

#module.generator["asset/inline"]

Generator options for asset/inline modules.

export default {
  module: {
    generator: {
      'asset/inline': {
        // options
      },
    },
  },
};

#module.generator["asset/inline"].binary

Same as module.generator["asset"].binary.

export default {
  module: {
    generator: {
      'asset/inline': {
        binary: false,
      },
    },
  },
};

#module.generator["asset/inline"].dataUrl

Same as module.generator["asset"].dataUrl.

export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          // options
        },
      },
    },
  },
};

#module.generator["asset/inline"].dataUrl.encoding

Same as module.generator["asset"].dataUrl.encoding.

export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          encoding: false,
        },
      },
    },
  },
};

#module.generator["asset/inline"].dataUrl.mimetype

Same as module.generator["asset"].dataUrl.mimetype.

export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          mimetype: 'image/png',
        },
      },
    },
  },
};

#module.generator["asset/resource"]

Generator options for asset/resource modules.

export default {
  module: {
    generator: {
      'asset/resource': {
        // options
      },
    },
  },
};

#module.generator["asset/resource"].binary

Same as module.generator["asset"].binary.

export default {
  module: {
    generator: {
      'asset/resource': {
        binary: false,
      },
    },
  },
};

#module.generator["asset/resource"].importMode

Same as module.generator["asset"].importMode.

export default {
  module: {
    generator: {
      'asset/resource': {
        importMode: 'preserve',
      },
    },
  },
};

#module.generator["asset/resource"].filename

Same as module.generator["asset"].filename.

export default {
  module: {
    generator: {
      'asset/resource': {
        filename: 'static/[hash][ext]',
      },
    },
  },
};

#module.generator["asset/resource"].outputPath

Same as module.generator["asset"].outputPath.

export default {
  module: {
    generator: {
      'asset/resource': {
        outputPath: 'foo/',
      },
    },
  },
};

#module.generator["asset/resource"].publicPath

Same as module.generator["asset"].publicPath.

export default {
  module: {
    generator: {
      'asset/resource': {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};

#module.generator["css/auto"]

Generator options for css/auto modules.

export default {
  module: {
    generator: {
      'css/auto': {
        // options
      },
    },
  },
};

#module.generator["css/auto"].exportsConvention

• Type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only'
• Default: 'as-is'

Customize how CSS export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.

export default {
  module: {
    generator: {
      'css/auto': {
        exportsConvention: 'camel-case',
      },
    },
  },
};

#module.generator["css/auto"].exportsOnly

• Type: boolean
• Default: 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.

export default {
  module: {
    generator: {
      'css/auto': {
        exportsOnly: false,
      },
    },
  },
};

#module.generator["css/auto"].localIdentName

• Type: string
• Default: [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].

export default {
  module: {
    generator: {
      'css/auto': {
        localIdentName: '[local]-[hash:base64:6]',
      },
    },
  },
};

#module.generator["css/auto"].esModule

• Type: boolean
• Default: 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 ES modules during ESM-CJS interop, otherwise, it will be treated as a CommonJS Module.

export default {
  module: {
    generator: {
      'css/auto': {
        esModule: true,
      },
    },
  },
};

For example, a common use case, when using the CommonJS 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:

import style from './style.css';

export function Button() {
  return <button className={style.btn}></button>;
}

The CommonJS format output published by the third-party component library:

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.Button = Button;
var _style = _interopRequireDefault(require('./style.css'));
var _jsxRuntime = require('react/jsx-runtime');
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
function Button() {
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
    className: _style['default'].btn, // <-- Note: After passing through _interopRequireDefault, this need to access default here.
  });
}

#module.generator.css

Generator options for css modules.

export default {
  module: {
    generator: {
      css: {
        // options
      },
    },
  },
};

#module.generator.css.exportsOnly

Same as module.generator["css/auto"].exportsOnly.

export default {
  module: {
    generator: {
      css: {
        exportsOnly: false,
      },
    },
  },
};

#module.generator.css.esModule

Same as module.generator["css/auto"].esModule.

export default {
  module: {
    generator: {
      css: {
        esModule: true,
      },
    },
  },
};

#module.generator["css/module"]

Generator options for css/module modules.

export default {
  module: {
    generator: {
      'css/module': {
        // options
      },
    },
  },
};

#module.generator["css/module"].exportsConvention

Same as module.generator["css/auto"].exportsConvention.

export default {
  module: {
    generator: {
      'css/module': {
        exportsConvention: 'camel-case',
      },
    },
  },
};

#module.generator["css/module"].exportsOnly

Same as module.generator["css/auto"].exportsOnly.

export default {
  module: {
    generator: {
      'css/module': {
        exportsOnly: false,
      },
    },
  },
};

#module.generator["css/module"].localIdentName

Same as module.generator["css/auto"].localIdentName.

export default {
  module: {
    generator: {
      'css/module': {
        localIdentName: '[local]-[hash:base64:6]',
      },
    },
  },
};

#module.generator["css/module"].esModule

Same as module.generator["css/auto"].esModule.

export default {
  module: {
    generator: {
      'css/module': {
        esModule: true,
      },
    },
  },
};

#module.generator.json.JSONParse

• Type: boolean
• Default: true

Use JSON.parse when the JSON string is longer than 20 characters.

export default {
  module: {
    generator: {
      json: {
        JSONParse: false,
      },
    },
  },
};

#module.rules

• Type: (Rule | Falsy)[]
• Default: []

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

• Type: Rule
• Default: {}

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. :

• Apply the list of Loader to these modules (Rule.use)
• Apply the module's type (Rule.type)
• Apply the module's resolve configuration (Rule.resolve)

#Condition

• Type:

type Condition =
  | string
  | RegExp
  | ((value: string) => boolean)
  | Conditions
  | LogicalConditions;

type Conditions = Condition[];

type LogicalConditions = {
  and?: Conditions;
  or?: Conditions;
  not?: Condition;
};

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 Condition
• resourceQuery is ?inline, and will match against with Rule.resourceQuery Condition
• resourceFragment is #foo, and will match against with Rule.resourceFragment Condition

Condition 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

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:

1. The parent Rule
2. Rule.rules
3. Rule.oneOf

#Rule.exclude

• Type: Condition
• Default: 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.

export default {
  module: {
    rules: [
      {
        exclude: /\.js$/,
      },
    ],
  },
};

#Rule.include

• Type: Condition
• Default: 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.

export default {
  module: {
    rules: [
      {
        include: /\.js$/,
      },
    ],
  },
};

#Rule.resource

• Type: Condition
• Default: 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.

export default {
  module: {
    rules: [
      {
        resource: /\.js$/,
      },
    ],
  },
};

#Rule.resourceQuery

• Type: Condition
• Default: 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

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        type: 'asset/inline',
      },
    ],
  },
};

#Rule.resourceFragment

• Type: Condition
• Default: 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

export default {
  module: {
    rules: [
      {
        resourceFragment: '#abc',
      },
    ],
  },
};

#Rule.test

• Type: Condition
• Default: 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.

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
      },
    ],
  },
};

#Rule.issuer

• Type: Condition
• Default: 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.

export default {
  module: {
    rules: [
      {
        issuer: /\.js$/,
      },
    ],
  },
};

#Rule.issuerLayer

• Type: string
• Default: undefined

Matches all modules that match this resource, and will match against layer of the module that issued the current module.

A basic example:

export default {
  module: {
    rules: [
      {
        issuerLayer: 'other-layer',
      },
    ],
  },
};

A more complex example is the combination with entry options to build modern and legacy bundles at the same time:

export default {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'modern',
    },
    'index-legacy': {
      import: './src/index.js',
      layer: 'legacy',
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        issuerLayer: 'modern',
        options: {
          env: { targets: ['chrome >= 100'] },
        },
      },
      {
        test: /\.js$/,
        issuerLayer: 'legacy',
        options: {
          env: { targets: ['ie >= 11'] },
        },
      },
    ],
  },
};

#Rule.dependency

• Type: Condition
• Default: 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().

For example, match all .js files, but exclude url type dependencies (such as new URL('./path/to/foo.js', import.meta.url)):

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        dependency: { not: 'url' },
      },
    ],
  },
};

#Rule.scheme

• Type: Condition
• Default: 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:

export default {
  module: {
    rules: [
      {
        scheme: 'data',
        type: 'asset/resource',
      },
    ],
  },
};

#Rule.mimetype

• Type: Condition
• Default: undefined

Matches modules based on MIME type instead of file extension. It's primarily useful for data URI module.

export default {
  module: {
    rules: [
      {
        mimetype: 'text/javascript',
        use: [
          // ...
        ],
      },
    ],
  },
};

#Rule.descriptionData

• Type: { [key: string]: Condition }
• Default: 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.

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /node_modules/,
        descriptionData: {
          name: packageJsonName => packageJsonName.includes('rspack'),
        },
        // additional rule options...
      },
    ],
  },
};

#Rule.with

• Type: { [key: string]: Condition }
• Default: undefined

with can be used in conjunction with import attributes.

For example, the following configuration will match { type: "url" } and will change the type of the matched modules to "asset/resource":

export default {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
    ],
  },
};

The following import will match:

import url from './data' with { type: 'url' };
import('./data', { with: { type: 'url' } });

It should be noted that in order for Rspack to properly match the with syntax, when you use builtin:swc-loader, you need to manually enable the keepImportAttributes configuration to preserve import attributes:

export default {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            experimental: {
+             keepImportAttributes: true,
            },
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

#Rule.loaders

#Rule.loader

Rule.loader is a shortcut to Rule.use: [ { loader } ]. See Rule.use for details.

#Rule.options

Rule.options is a shortcut to Rule.use: [ { options } ]. See Rule.use for details.

#Rule.parser

• Type: Object
• Default: {}

Parser options for the specific modules that matched by the rule conditions, this will override the parser options in module.parser.

export default {
  module: {
    rules: [
      {
        test: /\.css/,
        parser: {
          namedExports: false,
        },
        type: 'css/module',
      },
    ],
  },
};

For specific parser options and the corresponding module type, you can refer to module.parser.

#Rule.generator

• Type: Object
• Default: {}

Generator options for the specific modules that matched by the rule conditions, this will override the parser options in module.generator.

export default {
  module: {
    rules: [
      {
        test: /\.png/,
        generator: {
          filename: '[contenthash][ext]',
        },
        type: 'asset',
      },
    ],
  },
};

For specific generator options and the corresponding module type, you can refer to module.generator.

#Rule.sideEffects

• Type: boolean

Flag the module for side effects, this will affect the result of Tree Shaking.

export default {
  // ...
  module: {
    rules: [
      {
        test: /foo\.js$/,
        sideEffects: false,
      },
    ],
  },
};

#Rule.enforce

• Type: 'pre' | 'post'

Specifies the category of the loader. When not specified, it defaults to normal loader.

There is also an additional category "inlined loader" which are loaders applied inline of the import/require.

When specified as 'pre', the loader will execute before all other loaders.

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'my-pre-loader',
      },
    ],
  },
};