import WebpackLicense from '@components/WebpackLicense'; import PropertyType from '../../../components/PropertyType.tsx'; import { Tabs, Tab } from '@theme';

Extends

Used to extend configurations from other files or packages. This allows you to create a base configuration and extend it for different environments or use cases.

• Type: string | string[]
• Default: undefined

:::info This option is only supported in @rspack/cli.

If you are using the JavaScript API or other Rspack-based tools, extends will not take effect, use webpack-merge instead. :::

Basic usage

You can extend a configuration from another file by specifying the path to the file in the extends property. The path can be absolute or relative to the configuration file:

export default {
  extends: './base.rspack.config.mjs',
  // Override or add to the base configuration
  output: {
    filename: '[name].bundle.js',
  },
};

module.exports = {
  extends: './base.rspack.config.cjs',
  // Override or add to the base configuration
  output: {
    filename: '[name].bundle.js',
  },
};

:::tip When using relative paths, they are resolved relative to the configuration file that contains the extends property. :::

Multiple configurations

• Type: string[]
• Default: undefined

You can extend multiple configurations by providing an array of paths. Configurations are merged from right to left, meaning that the rightmost configuration will be merged into the leftmost one, and so on:

export default {
  extends: ['./base.rspack.config.mjs', './dev.rspack.config.mjs'],
  // Additional configuration options
  plugins: [
    // Add more plugins
  ],
};

:::info Merge Behavior

When merging configurations:

• Simple values are overwritten
• Arrays are concatenated
• Objects are deeply merged

:::

Node modules

• Type: string
• Default: undefined

You can also extend configurations from packages installed in your node_modules. The package should export a valid Rspack configuration:

export default {
  extends: 'some-rspack-config-package',
  // Override or add to the package's configuration
};

Nested extends

Configurations can have their own extends property, allowing for nested configuration inheritance. The resolution is performed recursively:

export default {
  extends: './core.rspack.config.mjs',
  // Base configuration options
};

export default {
  extends: './base.rspack.config.mjs',
  // Environment-specific configuration options
};