The content of this section is derived from the content of the following links and is subject to the CC BY 4.0 license.
The following contents can be assumed to be the result of modifications and deletions based on the original contents if not specifically stated.
The externals
configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. This feature is typically most useful to library developers, however there are a variety of applications for it.
string | object | function | RegExp | Array<string | object | function | RegExp>
Prevent bundling of certain import
ed packages and instead retrieve these external dependencies at runtime.
For example, to include jQuery from a CDN instead of bundling it:
index.html
This leaves any dependent modules unchanged, i.e. the code shown below will still work:
The property name jquery
specified under externals
in the above rspack.config.js
indicates that the module jquery
in import $ from 'jquery'
should be excluded from bundling. In order to replace this module, the value jQuery
will be used to retrieve a global jQuery
variable, as the default external library type is var
, see externalsType.
While we showed an example consuming external global variable above, the external can actually be available in any of these forms: global variable, CommonJS, AMD, ES2015 Module, see more in externalsType.
Depending on the externalsType, this could be the name of the global variable (see 'global'
, 'this'
, 'var'
, 'window'
) or the name of the module (see amd
, commonjs
, module
, umd
).
You can also use the shortcut syntax if you're defining only 1 external:
equals to
You can specify the external library type to the external with the ${externalsType} ${libraryName}
syntax. It will override the default external library type specified in the externalsType option.
For example, if the external library is a CommonJS module, you can specify
An object with { root, amd, commonjs, ... }
is only allowed for libraryTarget: 'umd'
and externalsType: 'umd'
. It's not allowed for other library targets.
string
var
Specify the default type of externals. amd
, umd
, system
and jsonp
externals depend on the output.libraryTarget
being set to the same value e.g. you can only consume amd
externals within an amd
library.
Supported types:
'amd'
'amd-require'
'assign'
- same as 'var'
'commonjs'
'commonjs-module'
'global'
'import'
- uses import()
to load a native ECMAScript module (async module)'jsonp'
'module'
'node-commonjs'
'self'
'system'
'this'
'umd'
'umd2'
'var'
'window'
Specify the default type of externals as 'commonjs'
. Webpack will generate code like const X = require('...')
for externals used in a module.
Will generate into something like:
Note that there will be a require()
in the output bundle.
Specify the default type of externals as 'global'
. Webpack will read the external as a global variable on the globalObject
.
Will generate into something like
Specify the default type of externals as 'module'
. Webpack will generate code like import * as X from '...'
for externals used in a module.
Note that there will be an import
statement in the output bundle.
Specify the default type of externals as 'node-commonjs'
. Webpack will import createRequire
from 'module'
to construct a require function for loading externals used in a module.
Will generate into something like
Note that there will be an import
statement in the output bundle.
Specify the default type of externals as 'self'
. Webpack will read the external as a global variable on the self
object.
Will generate into something like
Specify the default type of externals as 'this'
. Webpack will read the external as a global variable on the this
object.
Will generate into something like
Specify the default type of externals as 'var'
. Webpack will read the external as a global variable.
Will generate into something like
Specify the default type of externals as 'window'
. Webpack will read the external as a global variable on the window
object.
Will generate into something like
Enable presets of externals for specific targets.
Treat node.js built-in modules like fs
, path
or vm
as external and load them via require()
when used.
Treat references to http(s)://...
and std:...
as external and load them via import
(externalType: "module"
) when used. (Note that this changes execution order as externals are executed before any other code in the chunk).
Treat references to http(s)://...
and std:...
as external and load them via import()
(externalType: "import"
) when used. (Note that this external type is an async module, which has various effects on the execution).
Treat common electron built-in modules in main and preload context like electron
, ipc
or shell
as external and load them via require()
when used.
Treat electron built-in modules in the main context like app
, ipc-main
or shell
as external and load them via require()
when used.
Treat electron built-in modules in the renderer context like web-frame
, ipc-renderer
or shell
as external and load them via require()
when used.
Treat electron built-in modules in the preload context like web-frame
, ipc-renderer
or shell
as external and load them via require()
when used.