string>;
};
type ModulePathData = {
id: string | number;
hash: string;
hashWithLength: (number) => string;
};
```
:::warning
When developing locally, it's recommended to avoid using hash values in filenames.
This is because entry files and chunks split by [`optimization.splitChunks`](/plugins/webpack/split-chunks-plugin.md) are loaded via `
```
In the above example, we're passing a single entry file to `entry`, however, Rspack can accept [many kinds of entry point](/config/entry.md), e.g., an `array`, or an `object`.
1. If you provide an `array` as the `entry` point, only the last one in the array will be exposed.
```js title="rspack.config.mjs"
export default {
// …
entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed
output: {
library: 'MyLibrary',
},
};
```
2. If an `object` is provided as the `entry` point, all entries can be exposed using the `array` syntax of `library`:
```js title="rspack.config.mjs"
export default {
// …
entry: {
a: './src/a.js',
b: './src/b.js',
},
output: {
filename: '[name].js',
library: ['MyLibrary', '[name]'], // name is a placeholder here
},
};
```
Assuming that both `a.js` and `b.js` export a function `hello`, here's how to consume the libraries:
```html
```
### output.library.amdContainer
* **Type:** `string`
Use a container(defined in global space) for calling `define`/`require` functions in an AMD module.
:::warning
Note that the value of `amdContainer` **must be** set as a global variable.
:::
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
amdContainer: 'window["clientContainer"]',
type: 'amd', // or 'amd-require'
},
},
};
```
Which will result in the following bundle:
```js
window['clientContainer'].define(/*define args*/); // or 'amd-require' window['clientContainer'].require(/*require args*/);
```
### output.library.name
Specify a name for the library.
* **Type:** `string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}`
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
},
},
};
```
### output.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.
#### Expose a variable
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`](#outputlibraryname) at whatever scope the bundle was included at.
##### type: 'var'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'var',
},
},
};
```
When your library is loaded, the **return value of your entry point** will be assigned to a variable:
```js
var MyLibrary = _entry_return_;
// In a separate script with `MyLibrary` loaded…
MyLibrary.doSomething();
```
##### type: 'assign'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'assign',
},
},
};
```
This will generate an implied global which has the potential to reassign an existing value (use with caution):
```js
MyLibrary = _entry_return_;
```
Be aware that if `MyLibrary` isn't defined earlier your library will be set in global scope.
##### type: 'assign-properties'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'assign-properties',
},
},
};
```
Similar to [`type: 'assign'`](#type-assign) but a safer option as it will reuse `MyLibrary` if it already exists:
```js
// only create MyLibrary if it doesn't exist
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// then copy the return value to MyLibrary
// similarly to what Object.assign does
// for instance, you export a `hello` function in your entry as follow
export function hello(name) {
console.log(`Hello ${name}`);
}
// In another script with MyLibrary loaded
// you can run `hello` function like so
MyLibrary.hello('World');
```
#### Expose via object assignment
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`](#outputlibraryname).
##### type: 'this'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'this',
},
},
};
```
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:
```js
this['MyLibrary'] = _entry_return_;
// In a separate script
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if `this` is window
```
##### type: 'window'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'window',
},
},
};
```
The **return value of your entry point** will be assigned to the `window` object using the `output.library.name` value.
```js
window['MyLibrary'] = _entry_return_;
window.MyLibrary.doSomething();
```
##### type: 'global'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'global',
},
},
};
```
The **return value of your entry point** will be assigned to the global object using the `output.library.name` value. Depending on the [`target`](/config/target.md) value, the global object could change respectively, e.g., `self`, `global` or `globalThis`.
```js
global['MyLibrary'] = _entry_return_;
global.MyLibrary.doSomething();
```
##### type: 'commonjs'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
name: 'MyLibrary',
type: 'commonjs',
},
},
};
```
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.
```js
exports['MyLibrary'] = _entry_return_;
require('MyLibrary').doSomething();
```
:::warning
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.
:::
#### Module definition systems
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.
##### type: 'module'
```js title="rspack.config.mjs"
export default {
// …
experiments: {
outputModule: true,
},
output: {
library: {
// do not specify a `name` here
type: 'module',
},
},
};
```
Output ES modules.
However this feature is still experimental and not fully supported yet, so make sure to enable [`experiments.outputModule`](/config/experiments.md#experimentsoutputmodule) beforehand. In addition, you can track the development progress in [this thread](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).
##### type: 'modern-module'
```js title="rspack.config.mjs"
export default {
// …
experiments: {
outputModule: true,
},
output: {
library: {
// do not specify a `name` here
type: 'modern-module',
},
},
};
```
This configuration generates tree-shakable output for ES Modules.
However this feature is still experimental and not fully supported yet, so make sure to enable [`experiments.outputModule`](/config/experiments.md#experimentsoutputmodule) beforehand.
##### type: 'commonjs2'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
// note there's no `name` here
type: 'commonjs2',
},
},
};
```
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:
```js
module.exports = _entry_return_;
require('MyLibrary').doSomething();
```
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]`.
:::tip
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](https://github.com/webpack/webpack/issues/1114).)
:::
##### type: 'commonjs-static'
```js title="rspack.config.mjs"
export default {
// …
output: {
library: {
// note there's no `name` here
type: 'commonjs-static',
},
},
};
```
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:
```js
export function doSomething() {}
```
Output:
```js
function doSomething() {}
// …
exports.doSomething = __webpack_exports__.doSomething;
```
Consumption (CommonJS):
```js
const { doSomething } = require('./output.cjs'); // doSomething => [Function: doSomething]
```
Consumption (ESM):
```js
import { doSomething } from './output.cjs'; // doSomething => [Function: doSomething]
```
:::tip
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](https://github.com/webpack/webpack/issues/14998) or [this article](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed) (specifically, [this section](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed#publish-only-a-cjs-distribution-with-property-exports)).
:::
##### type: 'amd'
This will expose your library as an AMD module.
AMD modules require that the entry chunk (e.g. the first script loaded by the `
```
```js title="rspack.config.mjs"
export default {
//...
externals: {
jquery: 'jquery',
},
};
```
This leaves any dependent modules unchanged, i.e. the code shown below will still work:
```js
import $ from 'jquery';
$('.my-element').animate(/* ... */);
```
The property name `jquery` specified under `externals` in the above Rspack configuration 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](#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](#externalstype).
### string
Depending on the [externalsType](#externalstype), this could be the name of the global variable (see [`'global'`](#externalstypeglobal), [`'this'`](#externalstypethis), [`'var'`](#externalstypevar), [`'window'`](#externalstypewindow)) or the name of the module (see `amd`, [`commonjs`](#externalstypecommonjs), [`module`](#externalstypemodule), `umd`).
You can also use the shortcut syntax if you're defining only 1 external:
```js title="rspack.config.mjs"
export default {
//...
externals: 'jquery',
};
```
equals to
```js title="rspack.config.mjs"
export default {
//...
externals: {
jquery: 'jquery',
},
};
```
You can specify the [external library type](#externalstype) to the external with the `${externalsType} ${libraryName}` syntax. It will override the default external library type specified in the [externalsType](#externalstype) option.
For example, if the external library is a [CommonJS module](#externalstypecommonjs), you can specify
```js title="rspack.config.mjs"
export default {
//...
externals: {
jquery: 'commonjs jquery',
},
};
```
### string\[]\{#string-array}
```js title="rspack.config.mjs"
export default {
//...
externals: {
subtract: ['./math', 'subtract'],
},
};
```
`subtract: ['./math', 'subtract']` allows you select part of a module, where `./math` is the module and your bundle only requires the subset under the `subtract` variable.
When the `externalsType` is `commonjs`, this example would translate to `require('./math').subtract;` while when the `externalsType` is `window`, this example would translate to `window["./math"]["subtract"];`
Similar to the [string syntax](#string), you can specify the external library type with the `${externalsType} ${libraryName}` syntax, in the first item of the array, for example:
```js title="rspack.config.mjs"
export default {
//...
externals: {
subtract: ['commonjs ./math', 'subtract'],
},
};
```
### object
:::warning
An object with `{ root, commonjs, commonjs2, amd, ... }` is only allowed for [`libraryTarget: 'umd'`](/config/output.md#outputlibrarytarget) and [`externalsType: 'umd'`](#externalstype). It's not allowed for other library targets.
:::
```js title="rspack.config.mjs"
export default {
externals: {
// When `libraryTarget: 'umd'` and `externalsType: 'umd'`, the following format must be strictly followed:
lodash: {
root: '_', // indicates global variable
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
},
},
};
```
This syntax is used to describe all the possible ways that an external library can be made available. `lodash` here is available as `lodash` under AMD and CommonJS module systems but available as `_` in a global variable form. `subtract` here is available via the property `subtract` under the global `math` object (e.g. `window['math']['subtract']`).
### function
* **Type:**
* `function ({ context, request, contextInfo, getResolve }, callback)`
* `function ({ context, request, contextInfo, getResolve }) => promise`
It might be useful to define your own function to control the behavior of what you want to externalize from Rspack. [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals), for example, excludes all modules from the `node_modules` directory and provides options to allowlist packages.
Here're arguments the function can receive:
* `ctx` (`object`): Object containing details of the file.
* `ctx.context` (`string`): The directory of the file which contains the import.
* `ctx.request` (`string`): The import path being requested.
* `ctx.contextInfo` (`object`): Contains information about the issuer (e.g. the layer and compiler)
* `ctx.getResolve`: Get a resolve function with the current resolver options.
* `callback` (`function (err, result, type)`): Callback function used to indicate how the module should be externalized.
The callback function takes three arguments:
* `err` (`Error`): Used to indicate if there has been an error while externalizing the import. If there is an error, this should be the only parameter used.
* `result` (`string | string[] | object`): Describes the external module with the other external formats ([`string`](#string), [`string[]`](#string-array), or [`object`](#object))
* `type` (`string`): Optional parameter that indicates the module [external type](#externalstype) (if it has not already been indicated in the `result` parameter).
As an example, to externalize all imports where the import path matches a regular expression you could do the following:
```js title="rspack.config.mjs"
export default {
//...
externals: [
function ({ context, request }, callback) {
if (/^yourregex$/.test(request)) {
// Externalize to a commonjs module using the request path
return callback(null, 'commonjs ' + request);
}
// Continue without externalizing the import
callback();
},
],
};
```
Other examples using different module formats:
```js title="rspack.config.mjs"
export default {
externals: [
function (ctx, callback) {
// The external is a `commonjs2` module located in `@scope/library`
callback(null, '@scope/library', 'commonjs2');
},
],
};
```
```js title="rspack.config.mjs"
export default {
externals: [
function (ctx, callback) {
// The external is a global variable called `nameOfGlobal`.
callback(null, 'nameOfGlobal');
},
],
};
```
```js title="rspack.config.mjs"
export default {
externals: [
function (ctx, callback) {
// The external is a named export in the `@scope/library` module.
callback(null, ['@scope/library', 'namedexport'], 'commonjs');
},
],
};
```
```js title="rspack.config.mjs"
export default {
externals: [
function (ctx, callback) {
// The external is a UMD module
callback(null, {
root: 'componentsGlobal',
commonjs: '@scope/components',
commonjs2: '@scope/components',
amd: 'components',
});
},
],
};
```
### RegExp
Every dependency that matches the given regular expression will be excluded from the output bundles.
```js title="rspack.config.mjs"
export default {
//...
externals: /^(jquery|\$)$/i,
};
```
In this case, any dependency named `jQuery`, capitalized or not, or `$` would be externalized.
### Combining syntaxes
Sometimes you may want to use a combination of the above syntaxes. This can be done in the following manner:
```js title="rspack.config.mjs"
export default {
//...
externals: [
{
// String
react: 'react',
// Object
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_', // indicates global variable
},
// [string]
subtract: ['./math', 'subtract'],
},
// Function
function ({ context, request }, callback) {
if (/^yourregex$/.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
},
// Regex
/^(jquery|\$)$/i,
],
};
```
:::warning
[Default type](#externalstype) will be used if you specify `externals` without a type e.g. `externals: { react: 'react' }` instead of `externals: { react: 'commonjs-module react' }`.
:::
## externalsType
* **Type:** `string`
* **Default:** `'var'`
Specify the default type of externals. `amd`, `umd`, `system` and `jsonp` externals **depend on the [`output.libraryTarget`](/config/output.md#outputlibrarytarget)** 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'`](#externalstypecommonjs)
* `'commonjs-module'`
* [`'global'`](#externalstypeglobal)
* [`'module'`](#externalstypemodule)
* [`'import'`](#externalstypeimport) - uses `import()` to load a native ECMAScript module (async module)
* [`'module-import'`](#externalstypemodule-import)
* [`'commonjs-import'`](#externalstypecommonjs-import)
* `'jsonp'`
* [`'node-commonjs'`](#externalstypenode-commonjs)
* [`'promise'`](#externalstypepromise) - same as `'var'` but awaits the result (async module)
* [`'self'`](#externalstypeself)
* `'system'`
* [`'script'`](#externalstypescript)
* [`'this'`](#externalstypethis)
* `'umd'`
* `'umd2'`
* [`'var'`](#externalstypevar)
* [`'window'`](#externalstypewindow)
```js title="rspack.config.mjs"
export default {
//...
externalsType: 'promise',
};
```
### externalsType.commonjs
Specify the default type of externals as `'commonjs'`. Rspack will generate code like `const X = require('...')` for externals used in a module.
**Example**
```js
import fs from 'fs-extra';
```
```js title="rspack.config.mjs"
export default {
// ...
externalsType: 'commonjs',
externals: {
'fs-extra': 'fs-extra',
},
};
```
Will generate into something like:
```js
const fs = require('fs-extra');
```
Note that there will be a `require()` in the output bundle.
### externalsType.global
Specify the default type of externals as `'global'`. Rspack will read the external as a global variable on the [`globalObject`](/config/output.md#outputglobalobject).
**Example**
```js
import jq from 'jquery';
jq('.my-element').animate(/* ... */);
```
```js title="rspack.config.mjs"
export default {
// ...
externalsType: 'global',
externals: {
jquery: '$',
},
output: {
globalObject: 'global',
},
};
```
Will generate into something like
```js
const jq = global['$'];
jq('.my-element').animate(/* ... */);
```
### externalsType.module
Specify the default type of externals as `'module'`. Rspack will generate code like `import * as X from '...'` for externals used in a module.
Make sure to enable [`experiments.outputModule`](/config/experiments.md#experimentsoutputmodule) first, otherwise Rspack will throw errors.
**Example**
```js
import jq from 'jquery';
jq('.my-element').animate(/* ... */);
```
```js title="rspack.config.mjs"
export default {
experiments: {
outputModule: true,
},
externalsType: 'module',
externals: {
jquery: 'jquery',
},
};
```
Will generate into something like
```js
import * as __WEBPACK_EXTERNAL_MODULE_jquery__ from 'jquery';
const jq = __WEBPACK_EXTERNAL_MODULE_jquery__['default'];
jq('.my-element').animate(/* ... */);
```
Note that there will be an `import` statement in the output bundle.
### externalsType.import
Specify the default type of externals as `'import'`. Rspack will generate code like `import('...')` for externals used in a module.
**Example**
```js
async function foo() {
const jq = await import('jquery');
jq('.my-element').animate(/* ... */);
}
```
```js title="rspack.config.mjs"
export default {
externalsType: 'import',
externals: {
jquery: 'jquery',
},
};
```
Will generate into something like
```js
var __webpack_modules__ = {
jquery: module => {
module.exports = import('jquery');
},
};
// webpack runtime...
async function foo() {
const jq = await Promise.resolve(/* import() */).then(
__webpack_require__.bind(__webpack_require__, 'jquery'),
);
jq('.my-element').animate(/* ... */);
}
```
Note that there will be an `import()` statement in the output bundle.
### externalsType\['module-import']
Specify the default type of externals as `'module-import'`. This combines [`'module'`](#externalstypemodule) and [`'import'`](#externalstypeimport). Rspack will automatically detect the type of import syntax, setting it to `'module'` for static imports and `'import'` for dynamic imports.
Make sure to enable [`experiments.outputModule`](/config/index.md#experimentsoutputmodule) first if static imports exist, otherwise Rspack will throw errors.
**Example**
```js
import { attempt } from 'lodash';
async function foo() {
const jq = await import('jquery');
attempt(() => jq('.my-element').animate(/* ... */));
}
```
```js title="rspack.config.mjs"
export default {
externalsType: 'module-import',
externals: {
lodash: 'lodash',
jquery: 'jquery',
},
};
```
Will generate into something like
```js
import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from 'lodash';
const lodash = __WEBPACK_EXTERNAL_MODULE_jquery__;
var __webpack_modules__ = {
jquery: module => {
module.exports = import('jquery');
},
};
// webpack runtime...
async function foo() {
const jq = await Promise.resolve(/* import() */).then(
__webpack_require__.bind(__webpack_require__, 'jquery'),
);
(0, lodash.attempt)(() => jq('.my-element').animate(/* ... */));
}
```
Note that there will be an `import` or `import()` statement in the output bundle.
When a module is not imported via `import` or `import()`, Rspack will use `"module"` externals type as fallback. If you want to use a different type of externals as fallback, you can specify it with a function in the `externals` option. For example:
```js title="rspack.config.mjs"
export default {
externalsType: "module-import",
externals: [
function (
{ request, dependencyType },
callback
) {
if (dependencyType === "commonjs") {
return callback(null, `node-commonjs ${request}`);
}
callback();
},
]
```
### externalsType\['commonjs-import']
Specify the default type of externals as `'commonjs-import'`. This combines [`'commonjs'`](#externalstypecommonjs) and [`'import'`](#externalstypeimport). Rspack will automatically detect the type of import syntax, setting dynamic import to `'import'` and leaving others to `'commonjs'`.
This is useful when building a Node.js application that target Node.js version higher than `13.2.0`, which supports both [`import()` expressions](https://nodejs.org/api/esm.html#import-expressions) and `require()`.
:::note
`commonjs-import` type is only available of Rspack, and not applicable for webpack.
:::
**Example**
```js
import { attempt } from 'lodash';
async function foo() {
const jq = await import('jquery');
attempt(() => jq('.my-element').animate(/* ... */));
}
```
```js title="rspack.config.mjs"
export default {
externalsType: 'commonjs-import',
externals: {
lodash: 'lodash',
jquery: 'jquery',
},
};
```
Will generate into something like
```js
var __webpack_modules__ = {
lodash: function (module) {
module.exports = require('lodash');
},
jquery: function (module) {
module.exports = import('jquery');
},
};
// webpack runtime...
async function foo() {
const jq = await Promise.resolve(/* import() */).then(
__webpack_require__.bind(__webpack_require__, 'jquery'),
);
(0, lodash__WEBPACK_IMPORTED_MODULE_0__.attempt)(() =>
jq('.my-element').animate(/* ... */),
);
}
```
Note that there will be an `import()` statement in the output bundle.
### externalsType\['node-commonjs']
Specify the default type of externals as `'node-commonjs'`. Rspack will import [`createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) from `'module'` to construct a require function for loading externals used in a module.
**Example**
```js
import jq from 'jquery';
jq('.my-element').animate(/* ... */);
```
```js title="rspack.config.mjs"
export default {
experiments: {
outputModule: true,
},
externalsType: 'node-commonjs',
externals: {
jquery: 'jquery',
},
};
```
Will generate into something like
```js
import { createRequire } from 'module';
const jq = createRequire(import.meta.url)('jquery');
jq('.my-element').animate(/* ... */);
```
Note that there will be an `import` statement in the output bundle.
### externalsType.promise
Specify the default type of externals as `'promise'`. Rspack will read the external as a global variable (similar to [`'var'`](#externalstypepromise)) and `await` for it.
**Example**
```js
import jq from 'jquery';
jq('.my-element').animate(/* ... */);
```
```js title="rspack.config.mjs"
export default {
// ...
externalsType: 'promise',
externals: {
jquery: '$',
},
};
```
Will generate into something like
```js
const jq = await $;
jq('.my-element').animate(/* ... */);
```
### externalsType.self
Specify the default type of externals as `'self'`. Rspack will read the external as a global variable on the `self` object.
**Example**
```js
import jq from 'jquery';
jq('.my-element').animate(/* ... */);
```
```js title="rspack.config.mjs"
export default {
// ...
externalsType: 'self',
externals: {
jquery: '$',
},
};
```
Will generate into something like
```js
const jq = self['$'];
jq('.my-element').animate(/* ... */);
```
### externalsType.script
Specify the default type of externals as `'script'`. Rspack will load the external as a script exposing predefined global variables with HTML `"
}
```
```html title="html"
Hello, <strong>Rspack</strong>.
Hello, Rspack.
Hello, </p><script>document.write()</script><p>.
Hello,
.
```
#### Control statements
Use the `for in` statement to implement list traversal and the `if` statement to implement conditional judgment:
```txt title="ejs"
<% for tag in htmlRspackPlugin.tags.headTags { %>
<% if tag.tagName=="script" { %>
<%= toHtml(tag) %>
<% } %>
<% } %>
```
## Usage
The plugin will generate an HTML file for you that includes all your JS outputs in the head using `