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.
export default {
output: {
externals: {
'react-dom': 'ReactDOM',
},
},
};Array format
Use an array to define multiple external configurations:
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.
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:
const response = await window.axios.get('/api/users');RegExp patterns
Use regular expressions to match multiple modules with a pattern:
export default {
output: {
externals: [
// Externalize all @babel packages
/^@babel\/.+$/,
// Externalize all lodash sub-modules
/^lodash\/.+$/,
],
},
};
If output.target is web-worker, externals will not take effect. This is because the Web Worker environment cannot access global variables.