Skip to main content
Customize bundling behavior without leaving the Extension.js workflow. Solve custom bundler needs without forking the default setup. Add loaders (file-type transforms), plugins (build-time extensions), and aliases (import shortcuts) directly. Extension.js builds with Rspack, a Rust-based JavaScript bundler (@rspack/core), and you can extend the generated configuration directly.

​
How it works

Create one of these files at project root:
  • extension.config.js
  • extension.config.mjs
  • extension.config.cjs
Use the config key to patch the generated bundler configuration.

​
config capabilities

CapabilityWhat it does
Function hook (config: (config) => config)Gives full control to read and modify generated Rspack config before build.
Object merge (config: { ... })Merges additional config into the generated base config.
Rules (config.module.rules)Adds or changes loader rules for file types.
Plugins (config.plugins)Adds compile-time plugins and transformations.
Resolve (config.resolve)Adds aliases and module resolution behavior.
export default {
  config: (config) => {
    config.module.rules.push({
      test: /\.mdx$/,
      use: ["babel-loader", "@mdx-js/loader"],
    });
    return config;
  },
};

​
Option 2: object merge

config can also be an object. Extension.js merges it into the base configuration. 
export default {
  config: {
    resolve: {
      alias: {
        "@ui": "/absolute/path/to/ui",
      },
    },
  },
};

​
Rspack-first, webpack-compatible

Extension.js is Rspack-native, but you can still use much of the webpack ecosystem.
  • 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.
Example using a Rspack-native plugin: 
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