import { ApiMeta, Stability } from '../../../components/ApiMeta'; import PropertyType from '@components/PropertyType'; import WebpackLicense from '@components/WebpackLicense';

Module

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

Type: Object
Default: {}

module.defaultRules

Type: (Rule | Falsy)[]

defaultRules configures the built-in module resolution and processing rules that Rspack enables by default. These rules are applied automatically to ensure that common resource types such as JavaScript, JSON, CSS, and Wasm can be correctly resolved and bundled.

You can extend, override, or disable these default rules to gain finer control over the build behavior.

For example, extending the default rules:

export default {
  module: {
    defaultRules: [
      // Use "..." to reference Rspack’s default rules
      '...',
      // Add a custom rule
      {
        test: /\.foo$/,
        use: ['foo-loader'],
      },
    ],
  },
};

If you want to remove all of Rspack's default rules, simply omit "...":

export default {
  module: {
    defaultRules: [],
  },
};

:::tip See the source code for the full list of default rules. :::

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: 'image/png',
        },
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for asset/inline modules
      'asset/inline': {
        dataUrl: {
          encoding: false,
          mimetype: 'image/png',
        },
      },
      // 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: 'image/png',
        },
      },
    },
  },
};

When used as 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: see 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 rules[].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.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

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

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

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

module.parser.javascript.dynamicImportPrefetch

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

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

module.parser.javascript.dynamicImportPreload

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

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

module.parser.javascript.dynamicImportFetchPriority

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

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

module.parser.javascript.url

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',
      },
    },
  },
};

html

<!-- with 'relative' -->


<!-- without 'relative' -->

module.parser.javascript.exprContextCritical

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

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

module.parser.javascript.wrappedContextCritical

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

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

module.parser.javascript.unknownContextCritical

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

Set a regular expression to match wrapped dynamic dependencies.

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

module.parser.javascript.importMeta

Type: boolean | 'preserve-unknown'
Default: When using ESM output, the default value is 'preserve-unknown'; otherwise, it is true

Control whether Rspack parses and replaces import.meta in source code. Available values:

"preserve-unknown": Known import.meta properties are statically analyzed at compile-time, other properties are preserved and evaluated at runtime.
true: All import.meta properties are statically analyzed at compile-time.
false: All import.meta properties are evaluated at runtime.

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

module.parser.javascript.exportsPresence

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: 'auto',
      },
    },
  },
};

module.parser.javascript.importExportsPresence

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

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

txt

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 };
   · ─────────────────

:::info Recommended with isolatedModules When using Rspack to bundle TypeScript, we strongly recommend enabling isolatedModules in tsconfig.json (also recommended with other bundlers as it matches how bundlers compile TypeScript: .ts files are independent and compiled separately). This will give TypeScript's own warning for type re-exports: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'. :::

'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 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 {
  module: {
    parser: {
      javascript: {
        typeReexportsPresence: 'tolerant',
      },
    },
    rules: [
      {
        test: /\.(?:js|mjs|ts)$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              detectSyntax: 'auto',
              collectTypeScriptInfo: {
                typeExports: true, // Must be enabled in "tolerant" mode
              },
            },
          },
        ],
      },
    ],
  },
};

Please refer to type reexports presence example for more details.

module.parser.javascript.worker

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

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

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

Control whether renaming of the CommonJS require function will be parsed and transformed.

When set to true, Rspack will parse and transform cases where require is assigned to a variable or passed as a parameter (e.g., const req = require; req('./module')).

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

module.parser.javascript.requireAsExpression

Control whether require used as an expression will be parsed.

When set to true, Rspack will parse require when it's used as an expression (e.g., const req = require; req('./module')) and emit a warning. When set to false, this pattern will be ignored.

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

module.parser.javascript.requireDynamic

Control whether dynamic require calls will be parsed.

When set to false, Rspack will not parse dynamic require calls where the module path is not a static string (e.g., require(variable)). This can improve build performance if your code doesn't use dynamic requires.

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

module.parser.javascript.requireResolve

Control whether require.resolve() calls will be parsed.

When set to false, Rspack will not parse require.resolve() calls. This can improve build performance if your code doesn't use require.resolve().

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

module.parser.javascript.importDynamic

Control whether dynamic import() calls will be parsed.

When set to false, Rspack will not parse dynamic import() calls where the module path is not a static string (e.g., import(variable)). This can improve build performance if your code doesn't use dynamic imports.

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

module.parser.javascript.strictThisContextOnImports

Controls whether Rspack preserves the this binding strictly when calling exported functions as object members from imported modules.

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

This mainly affects cases where an exported function uses this to refer to the current module object, for example:

import * as mod from './mod';

console.log(mod.fn());

export function fn() {
  return this.value;
}

export const value = 42;

In the example above, enabling this option prints 42. When it is disabled, value is considered unused and removed for better tree shaking, so the result becomes undefined.

When set to true, Rspack follows the spec more strictly and prioritizes correct runtime this semantics, but tree shaking can become less effective.
When set to false, Rspack can generate more optimized output, but runtime this semantics may no longer be preserved in these patterns.

This pattern is uncommon in real-world ESM code, and enabling the option can reduce tree shaking effectiveness, so the default is false.

:::tip If you run into this pattern in practice, it is usually better to avoid relying on it. If that is not possible, prefer enabling it only for specific modules with module rule condition.

export default {
  module: {
    rules: [
      {
        test: /index\.js$/, // Only enable strictThisContextOnImports for import statements in the index.js module
        parser: {
          strictThisContextOnImports: true,
        },
      },
    ],
  },
};

:::

module.parser.javascript.jsx

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,
      },
    },
  },
};

:::warning This option is experimental in Rspack and may change or be removed. :::

module.parser.javascript.importMetaResolve

Allow the JavaScript parser to understand import.meta.resolve() syntax.

Currently, import.meta.resolve("./module") behaves similarly to require.resolve("./module"): it includes the module in the final bundle and returns the module ID.

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

:::warning This option is experimental in Rspack and may change or be removed. :::

module.parser.javascript.pureFunctions

Manually mark top-level identifiers in matched modules as side-effect-free for pure-function-based tree shaking. Each name must resolve to a supported top-level name in the module — a function/class/variable declaration, an import specifier, an exported alias such as export { foo as bar }, or default for a default-exported function or arrow.

This option is mainly intended for third-party libraries whose source cannot be annotated directly. You can either configure it on the library file itself, or on a consumer file to assert that calls to a particular import are pure.

Although the option lives under module.parser.javascript, in practice it is usually better to apply it through module.rules[i].parser so you can configure pureFunctions more precisely for specific modules.

export default {
  experiments: {
    pureFunctions: true,
  },
  module: {
    rules: [
      // Mark exports of a third-party library as pure.
      {
        test: /node_modules\/some-library\/index\.js$/,
        parser: {
          pureFunctions: ['isString'],
        },
      },
      // Or mark imports on the consumer side: calls to `cva` in this file
      // are treated as pure regardless of how the library declares itself.
      {
        test: /src\/styles\.js$/,
        parser: {
          pureFunctions: ['cva'],
        },
      },
    ],
  },
};

:::warning This option only takes effect when experiments.pureFunctions is enabled, and Rspack emits a warning if a configured name does not appear as a top-level binding in the matched module. :::

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/auto"].resolveImport

Type: boolean | ((context: { url: string, media: string | undefined, resourcePath: string, supports: string | undefined, layer: string | undefined }) => boolean)
Default: true

Whether to resolve @import syntax.

true: enable processing of @import rules (default).
false: disable processing of @import rules.
function: only process @import rules that satisfy the condition.

export default {
  module: {
    parser: {
      'css/auto': {
        resolveImport: ({ url }) => {
          return url.includes('style.css');
        },
      },
    },
  },
};

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

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

export default {
  module: {
    parser: {
      css: {
        resolveImport: ({ url }) => {
          return url.includes('style.css');
        },
      },
    },
  },
};

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.parser["css/module"].resolveImport

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

export default {
  module: {
    parser: {
      'css/module': {
        resolveImport: ({ url }) => {
          return url.includes('style.css');
        },
      },
    },
  },
};

module.rules

See Module Rules for details.