close
Guide
Config
Plugin
API
Community
Version
Guide
Config
Plugin
API
Community

output.externals

  • Type:
type Externals =
  | string
  | object
  | function
  | RegExp
  | Array<string | object | function | RegExp>;
  • Default: undefined

At build time, prevent some import dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.

For more information, please see: Rspack Externals.

Examples

Basic usage

Exclude the react-dom dependency from the output bundle. To get this module at runtime, the value of react-dom will globally retrieve the ReactDOM variable.

rsbuild.config.ts
export default {
  output: {
    externals: {
      'react-dom': 'ReactDOM',
    },
  },
};

Array format

Use an array to define multiple external configurations:

rsbuild.config.ts
export default {
  output: {
    externals: [
      {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
      'lodash',
    ],
  },
};

Using with CDN

A common use case is to load libraries from CDN and exclude them from your bundle, then use html.tags to include them in your HTML.

rsbuild.config.ts
export default {
  output: {
    externals: {
      axios: 'axios',
    },
  },
  html: {
    tags: [
      {
        tag: 'script',
        append: false,
        attrs: {
          defer: true,
          crossorigin: true,
          src: 'https://unpkg.com/axios@1/dist/axios.min.js',
        },
      },
    ],
  },
};

Then you can use the external libraries in your source code:

src/api.js
const response = await window.axios.get('/api/users');

RegExp patterns

Use regular expressions to match multiple modules with a pattern:

rsbuild.config.ts
export default {
  output: {
    externals: [
      // Externalize all @babel packages
      /^@babel\/.+$/,
      // Externalize all lodash sub-modules
      /^lodash\/.+$/,
    ],
  },
};
TIP

If output.target is web-worker, externals will not take effect. This is because the Web Worker environment cannot access global variables.