English

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.

#output.externals

#Examples

#Basic usage

#Array format

#Using with CDN

#RegExp patterns

#output.externals

#Examples

#Basic usage

#Array format

#Using with CDN

#RegExp patterns

output.externals

Examples

Basic usage

Array format

Using with CDN

RegExp patterns

output.externals

Examples

Basic usage

Array format

Using with CDN

RegExp patterns