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.
Used to indicate how and where Rspack outputs the contents of the generated file.
Object
string
Use a container(defined in global space) for calling define
/require
functions in an AMD module.
output.library.amdContainer
instead as we might drop support for output.amdContainer
in the future.amdContainer
must be set as a global variable.Which will result in the following bundle:
string
'[hash][ext][query]'
The name of the file to be output by the Asset module. This value can be overridden by Rule.generator.filename.
'asset'
and asset is set to satisfy Rule.parser.dataUrlCondition'asset/resource'
string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
'[name].js'
This option determines the name of the JavaScript bundle file to be output. These bundles will be written to the directory specified by output.path
.
For a single Entry, you can use a static name such as:
For multiple Entry, or other cases where multiple bundles can be split, you need to dynamically generate the filename of the bundle in the following way:
Rspack performs code splitting optimizations on user input code, which may include, but are not limited to, code splitting, bundle splitting, or splitting implemented through other plugins. These splitting actions can result in multiple bundles being generated, so the filenames of the bundles need to be generated dynamically.
Use Entry name.
Using the internally generated chunk id.
Using hash generated from file content.
Of course you can also use a combination of each.
Using the function to return the filename.
More can be found in Template String.
string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
output.filename
This option determines the name of the non-initial JavaScript chunk file.
false | 'array-push' | 'commonjs' | 'module'
The format of chunks, The default value of this option depends on the target
and output.module
setting. In general, the 'array-push'
format is used when the target is web or webworker, the 'module'
format is used when it is ESM, and the 'commonjs'
format is used when it is node.js.
false | 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import'
The method to load chunks, The default value of this option depends on the target
and chunkFormat
setting. In general, 'jsonp'
is used to load chunks when target is web; 'import'
is used to load chunks when ESM; 'import-scripts'
is used to load chunks when webworker; 'require'
is used to load chunks when node.js; 'async-node'
(fs.readFile
+ vm.runInThisContext
) is used to load chunks when async node.js.
string
output.uniqueName
webpackChunk${output.uniqueName}
This option determines the global variable is used by Rspack for loading chunks.
string
| function (info)
A fallback is used when the template string or function above yields duplicates.
See output.devtoolModuleFilenameTemplate
.
string = 'webpack://[namespace]/[resource-path]?[loaders]'
| function (info) => string
This option is only used when devtool
uses an option that requires module names.
Customize the names used in each source map's sources
array. This can be done by passing a template string or function. For example, when using devtool: 'eval'
.
The following substitutions are available in template strings:
Template | Description |
---|---|
[absolute-resource-path] | The absolute filename |
[all-loaders] | Automatic and explicit loaders and params up to the name of the first loader |
[hash] | The hash of the module identifier |
[id] | The module identifier |
[loaders] | Explicit loaders and params up to the name of the first loader |
[resource] | The path used to resolve the file and any query params used on the first loader |
[resource-path] | The path used to resolve the file without any query params |
[namespace] | The modules namespace. This is usually the library name when building as a library, empty otherwise |
When using a function, the same options are available camel-cased via the info
parameter:
If multiple modules would result in the same name, output.devtoolFallbackModuleFilenameTemplate
is used instead for these modules.
This option determines the module's namespace used with the output.devtoolModuleFilenameTemplate
. When not specified, it will default to the value of: output.uniqueName
. It's used to prevent source file path collisions in sourcemaps when loading multiple libraries built with Rspack.
For example, if you have 2 libraries, with namespaces library1
and library2
, which both have a file ./src/index.js
(with potentially different contents), they will expose these files as webpack://library1/./src/index.js
and webpack://library2/./src/index.js
.
string[]
Enables available runtime module bundling of chunkLoadingType.
Tell Rspack what kind of ES-features may be used in the generated runtime-code.
boolean
true
The environment supports async function and await (async function () { await ... }
).
string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
output.filename
This option determines the name of the CSS file.
string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
output.chunkFilename
This option determines the name of the non-initial CSS chunk file.
false | 'anonymous' | 'use-credentials'
false
The crossOriginLoading
config allows you to set the crossorigin attribute for dynamically loaded chunks.
If target
is 'web'
, Rspack will dynamically create <script>
and <link>
tags to load asynchronous JavaScript and CSS resources. Rspack will add the crossorigin
attribute to the <script>
and <link>
tags if the URLs of these resources are on other domains and crossOriginLoading
is not false
.
crossOriginLoading
has the following optional values:
false
: Do not set the crossorigin attribute.'anonymous'
: Set crossorigin
to 'anonymous'
to enable cross-origin without user credentials.'use-credentials'
: Set crossorigin
to 'use-credentials'
enable cross-origin with user credentials.For example, set output.publicPath
to https://example.com/
and output.crossOriginLoading
to 'anonymous'
:
When Rspack dynamically loads JavaScript resources, it will generate the following HTML:
string
path.resolve(process.cwd(), 'dist')
Output the absolute path to the file directory.
boolean | 'verbose'
true
Tells Rspack to include comments in bundles with information about the contained modules. This option defaults to true
in development
and false
in production
mode respectively. 'verbose'
shows more information like exports, runtime requirements and bailouts.
While the data these comments can provide is useful during development when reading the generated code, it should not be used in production.
string
'web'
or 'web-worker'
when it is 'auto'
This option determines the URL prefix of the referenced resource, such as: image, file, etc.
For example, given a configuration file.
For a non-initial chunk file, its request URL looks like this: /assets/1.chunk.js
.
For a reference to an image, the request URL looks like this: /assets/logo.png
.
Also, it is useful when you deploy the product using a CDN
For all asset resources, their request URLs look like this: https://cdn.example.com/assets/logo.png
.
You can set publicPath
dynamically using __webpack_public_path__
in the runtime code, and the __webpack_public_path__
will override the publicPath
in the Rspack config, but it will only take effect for dynamically loaded resources.
First create a publicPath.js
:
Then import it into the first line of the entry file:
'module' | 'text/javascript' | boolean
false
This option allows loading asynchronous chunks with a custom script type, such as <script type="module" ...>
.
If output.module
is set to true
, output.scriptType
will default to 'module'
instead of false
.
string
'[file].map[query]'
Configure how source maps are named. Only takes effect when devtool
is set to 'source-map'
, which writes an output file.
The [name]
, [id]
, [fullhash]
and [chunkhash]
substitutions from output.filename
can be used. In addition to those, you can use substitutions listed under Filename-level in Template strings.
boolean
false
Handle module loading errors according to the ES Module specification, with performance loss.
object
Controls Trusted Types compatibility. When enabled, Rspack will detect Trusted Types support and, if they are supported, use Trusted Types policies to create script URLs it loads dynamically. Use when the application runs under a require-trusted-types-for Content Security Policy directive.
It is disabled by default (no compatibility, script URLs are strings).
The policy name is taken from the object's policyName
property.
The template string below can be used to replace the corresponding file name. Different contexts correspond to different replaceable content, e.g. output.assetModuleFilename supports the use of File Context and Module Context.
Content that can be replaced at the compilation level.
Template | Description |
---|---|
[fullhash] | full hash of compilation |
Content that can be replaced at the chunk level.
template | description |
---|---|
[id] | The current chunk id |
[name] | Use name when chunk name exists, otherwise use chunk id |
[chunkhash] | The hash value of the chunk, computed from all elements of type in the current chunk |
[contenthash] | The hash value of the chunk, computed from the elements that contain only the content of that type. For example, if a module of type JavaScript is generated, only the hash of all JavaScript-typed modules in the current chunk is used. |
Content that can be replaced at the module level.
Template | Description |
---|---|
[id] | The id of the module |
[hash] | The hash of the module |
[contenthash] | hash of module content |
Content that can be replaced at the file level.
template | description |
---|---|
[query] | The file query, containing ? |
[path] | The path to the file, without the filename |
[name] | file name, without extension and file path |
[ext] | extension, contains . (only available in output.assetModuleFilename) |
Prefer to use output.library.auxiliaryComment
instead.
string
| object
When used in tandem with output.library
and output.libraryTarget
, this option allows users to insert comments within the export wrapper. To insert the same comment for each libraryTarget
type, set auxiliaryComment
to a string:
which will yield the following:
someLibName.js
For fine-grained control over each libraryTarget
comment, pass an object:
[string]
List of library types enabled for use by entry points.
string
self
When targeting a library, especially when libraryTarget
is 'umd'
, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set output.globalObject
option to 'this'
. Defaults to self
for Web-like targets.
The return value of your entry point will be assigned to the global object using the value of output.library.name
. Depending on the value of the target
option, the global object could change respectively, e.g., self
, global
, or globalThis
.
For example:
string
'hex'
The encoding to use when generating the hash. Using 'base64'
for filenames might be problematic since it has the character /
in its alphabet. Likewise 'latin1'
could contain any character.
number
'20'
The prefix length of the hash digest to use.
'md4' | 'xxhash64'
'md4'
The hashing algorithm to use.
hashFunction
supports xxhash64
as a faster algorithm, which will be used as default when experiments.futureDefaults
is enabled.
An optional salt to update the hash.
string
import
The name of the native import()
function. Can be used for polyfilling, e.g. with dynamic-import-polyfill
.
Output a library exposing the exports of your entry point.
string | string[] | object
Let's take a look at an example.
Say you have exported a function in your src/index.js
entry:
Now the variable MyLibrary
will be bound with the exports of your entry file, and here's how to consume the Rspack bundled library:
In the above example, we're passing a single entry file to entry
, however, Rspack can accept many kinds of entry point, e.g., an array
, or an object
.
If you provide an array
as the entry
point, only the last one in the array will be exposed.
If an object
is provided as the entry
point, all entries can be exposed using the array
syntax of library
:
Assuming that both a.js
and b.js
export a function hello
, here's how to consume the libraries:
string
Use a container(defined in global space) for calling define
/require
functions in an AMD module.
Note that the value of amdContainer
must be set as a global variable.
Which will result in the following bundle:
Specify a name for the library.
Type:
Configure how the library will be exposed.
Type: string
Types included by default are 'var'
, 'module'
, 'system'
, 'assign'
, 'assign-properties'
, 'this'
, 'window'
, 'self'
, 'global'
, 'commonjs'
, 'commonjs2'
, 'commonjs-module'
, 'commonjs-static'
, 'amd'
, 'amd-require'
, 'umd'
, 'umd2'
, but others might be added by plugins.
For the following examples, we'll use _entry_return_
to indicate the values returned by the entry point.
These options assign the return value of the entry point (e.g. whatever the entry point exported) to the name provided by output.library.name
at whatever scope the bundle was included at.
When your library is loaded, the return value of your entry point will be assigned to a variable:
This will generate an implied global which has the potential to reassign an existing value (use with caution):
Be aware that if MyLibrary
isn't defined earlier your library will be set in global scope.
Similar to type: 'assign'
but a safer option as it will reuse MyLibrary
if it already exists:
These options assign the return value of the entry point (e.g. whatever the entry point exported) to a specific object under the name defined by output.library.name
.
The return value of your entry point will be assigned to this
under the property named by output.library.name
. The meaning of this
is up to you:
The return value of your entry point will be assigned to the window
object using the output.library.name
value.
The return value of your entry point will be assigned to the global object using the output.library.name
value. Depending on the target
value, the global object could change respectively, e.g., self
, global
or globalThis
.
The return value of your entry point will be assigned to the exports
object using the output.library.name
value. As the name implies, this is used in CommonJS environments.
Note that not setting a output.library.name
will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.
These options will result in a bundle that comes with a complete header to ensure compatibility with various module systems. The output.library.name
option will take on a different meaning under the following output.library.type
options.
The return value of your entry point will be assigned to the module.exports
. As the name implies, this is used in Node.js (CommonJS) environments:
If we specify output.library.name
with type: commmonjs2
, the return value of your entry point will be assigned to the module.exports.[output.library.name]
.
Wondering the difference between CommonJS and CommonJS2 is? While they are similar, there are some subtle differences between them that are not usually relevant in the context of rspack. (For further details, please read this issue.)
Individual exports will be set as properties on module.exports
. The "static" in the name refers to the output being statically analysable, and thus named exports are importable into ESM via Node.js:
Input:
Output:
Consumption (CommonJS):
Consumption (ESM):
This is useful when source code is written in ESM and the output should be compatible with both CJS and ESM. For further details, please read this issue or this article (specifically, this section).
This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD, and as global variable. Take a look at the UMD Repository to learn more.
In this case, you need the library.name
property to name your module:
And finally the output is:
Note that omitting library.name
will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the object assignment section. Example:
The output will be:
You may specify an object for library.name
for differing names per targets:
This will expose your library as a System.register
module.
System modules require that a global variable System
is present in the browser when the bundle is executed. Compiling to System.register
format allows you to System.import('/bundle.js')
without additional configuration and has your bundle loaded into the System module registry.
Output:
By adding output.library.name
to configuration in addition to having output.library.type
set to system
, the output bundle will have the library name as an argument to System.register
:
Output ES Module.
However this feature is still experimental and not fully supported yet, so make sure to enable experiments.outputModule beforehand.
Add a comment in the UMD wrapper.
string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }
To insert the same comment for each umd
type, set auxiliaryComment
to a string:
which will yield the following:
For fine-grained control, pass an object:
Specify which export should be exposed as a library.
string | string[]
It is undefined
by default, which will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using output.library.type: 'var'
.
The default export of your entry point will be assigned to the library name:
You can pass an array to output.library.export
as well, it will be interpreted as a path to a module to be assigned to the library name:
And here's the library code:
boolean
When using output.library.type: "umd"
, setting output.library.umdNamedDefine
to true
will name the AMD module of the UMD build. Otherwise, an anonymous define
is used.
The AMD module will be:
We might drop support for this, so prefer to use output.library.export which works the same as libraryExport
.
string
| string[]
Configure which module or modules will be exposed via the libraryTarget
. It is undefined
by default, same behaviour will be applied if you set libraryTarget
to an empty string e.g. ''
it will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using libraryTarget: 'var'
.
The following configurations are supported:
libraryExport: 'default'
- The default export of your entry point will be assigned to the library target:
libraryExport: 'MyModule'
- The specified module will be assigned to the library target:
libraryExport: ['MyModule', 'MySubModule']
- The array is interpreted as a path to a module to be assigned to the library target:
With the libraryExport
configurations specified above, the resulting libraries could be utilized as such:
string
var
Please use output.library.type
instead as we might drop support for output.libraryTarget
in the future.
Prefer to use output.library.umdNamedDefine
instead.
boolean
When using libraryTarget: "umd"
, setting output.umdNamedDefine
to true
will name the AMD module of the UMD build. Otherwise an anonymous define
is used.
string
output.library
name or the package name from package.json in the context, if both aren't found, it is set to an ''.This option determines the unique name of the Rspack build to avoid multiple Rspack runtimes to conflict when using globals.
output.uniqueName
will be used to generate unique globals for:
boolean
false
Clean the output directory before emit.
boolean
false
Output JavaScript files as module type. Disabled by default as it's an experimental feature. output.module
is an experimental feature and can only be enabled by setting experiments.outputModule
to true.
false | 'fetch', 'async-node'
'fetch'
Option to set the method of loading WebAssembly Modules. Methods included by default are 'fetch'
(web/webworker), 'async-node'
(Node.js).
The default value can be affected by different target:
'fetch'
if target is set to 'web'
, 'webworker'
, 'electron-renderer'
or 'node-webkit'
.'async-node'
if target is set to 'node'
, 'async-node'
, 'electron-main'
or 'electron-preload'
.string
'[hash].module.wasm'
Specifies the filename of WebAssembly modules. It should be provided as a relative path within the output.path
directory.
Enables available runtime module bundling of wasmLoadingType.
false | 'fetch', 'async-node'
boolean
true
Create async chunks that are loaded on demand.
string
"[id].[fullhash].hot-update.js"
Customize the filenames of hot update chunks, only placeholders allowed here are [id]
and [fullhash]
.
string
"[runtime].[fullhash].hot-update.json"
Customize the main hot update filename. [fullhash]
and [runtime]
are available as placeholder.
string
"webpackHotUpdate" + output.uniqueName
Only used when chunkLoading is "jsonp"
or "import-scripts"
. This global variable is used for loading hot update chunks.
boolean
true
Tells Rspack to add IIFE wrapper around emitted code.