Skip to main content

Documentation Index

Fetch the complete documentation index at: https://extension.js.org/llms.txt

Use this file to discover all available pages before exploring further.

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