Rspack configuration in extension.config.js

​

How it works

• extension.config.js
• extension.config.mjs
• extension.config.cjs

​

config capabilities

​

Option 1: function hook (recommended)

export default {
  config: (config) => {
    config.module.rules.push({
      test: /\.mdx$/,
      use: ["babel-loader", "@mdx-js/loader"],
    });
    return config;
  },
};

​

Option 2: object merge

export default {
  config: {
    resolve: {
      alias: {
        "@ui": "/absolute/path/to/ui",
      },
    },
  },
};

​

Rspack-first, webpack-compatible

• The config type extends @rspack/core Configuration.
• Many webpack loaders/plugins work through compatibility layers.
• Some webpack internals/plugins are not 1:1 compatible with Rspack.

import { DefinePlugin } from "@rspack/core";

export default {
  config: (config) => {
    config.plugins = [
      ...config.plugins,
      new DefinePlugin({
        __FEATURE_FLAG__: JSON.stringify("enabled"),
      }),
    ];
    return config;
  },
};

​

When to use this

• Add custom loaders/rules for project-specific file types.
• Add plugins for compile-time transforms and diagnostics.
• Override resolve aliases and module behavior not exposed by first-class Extension.js options.

​

Best practices

• Prefer first-class options first: Use browser / commands configuration keys before low-level bundler overrides.
• Patch minimally: Change only the pieces you need, then return the configuration.
• Keep plugins Rspack-aware: Prefer Rspack-native plugins when available.
• Verify on all targets: Test dev, start, preview, and build for your browser matrix after configuration changes.

​

Next steps

• Learn more about extension config (extension.config.js).
• Learn more about Multi-platform builds.