diff --git a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
index f5e39efbec4..c0cecb69d14 100644
--- a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
@@ -32,7 +32,7 @@ In order to align the default template syntax of `html-webpack-plugin`, Rspack c
### Supported EJS Syntax
-Only the following basic interpolation expressions are supported. Here, the interpolation expressions only support the most basic string types and do not support arbitrary JavaScript expressions. Other EJS syntaxes are currently not supported.
+Only the following basic interpolation expressions and some control statements are supported. Here, the interpolation expressions only support the most basic string types and do not support arbitrary JavaScript expressions. Other EJS syntaxes are currently not supported.
#### \<%-: Escaped output
@@ -85,6 +85,18 @@ Does not escape the content within the interpolation:
.
```
+#### 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 `` tag in the final html content.
+
+```js title="rspack.config.js"
+const AddScriptPlugin = {
+ apply: function (compiler) {
+ compiler.hooks.compilation.tap('AddScriptPlugin', compilation => {
+ HtmlRspackPlugin.getCompilationHooks(
+ compilation,
+ ).beforeAssetTagGeneration.tapPromise('AddScriptPlugin', async data => {
+ data.assets.js.push('extra-script.js');
+ });
+ });
+ },
+};
+
+module.exports = {
+ //...
+ plugins: [new HtmlRspackPlugin(), AddScriptPlugin],
+};
+```
+
+### alterAssetTags
+
+This hook will be called after generating the asset tags based on the asset files, but before determining the insertion position of the tags.
+
+The tags can be adjusted here.
+
+- **Type**: `AsyncSeriesWaterfallHook<[AlterAssetTagsData]>`
+- **Parameters**:
+
+ ```ts
+ type HtmlTag = {
+ tagName: string;
+ attributes: Record;
+ voidTag: boolean;
+ innerHTML?: string;
+ asset?: string;
+ };
+
+ type AlterAssetTagsData = {
+ assetTags: {
+ scripts: Array;
+ styles: Array;
+ meta: Array;
+ };
+ outputName: string;
+ plugin: {
+ options: HtmlRspackPluginOptions;
+ };
+ };
+ ```
+
+:::warning
+Only `assetTags` can be modified. Modifications to other items will not take effect.
+:::
+
+- When set the attribute value to `true`, a valueless attribute will be added, and `` will be generated.
+- When set the attribute value to a `string`, a valued attribute will be added, and `` will be generated.
+- When set the attribute value to `false`, the attribute will be removed.
+
+The following code adds the `specialAttribute` property to all `script` type tags:
+
+```js title="rspack.config.js"
+const AddAttributePlugin = {
+ apply: function (compiler) {
+ compiler.hooks.compilation.tap('AddAttributePlugin', compilation => {
+ HtmlRspackPlugin.getCompilationHooks(
+ compilation,
+ ).alterAssetTags.tapPromise('AddAttributePlugin', async data => {
+ data.assetTags.scripts = data.assetTags.scripts.map(tag => {
+ if (tag.tagName === 'script') {
+ tag.attributes.specialAttribute = true;
+ }
+ return tag;
+ });
+ });
+ });
+ },
+};
+
+module.exports = {
+ //...
+ plugins: [new HtmlRspackPlugin(), AddAttributePlugin],
+};
+```
+
+### alterAssetTagGroups
+
+This hook will be called after generating the tag groups of `head` and `body`, but before the template is rendered by function or template engine.
+
+The insertion position of the tags can be adjusted here.
+
+- **Type**: `AsyncSeriesWaterfallHook<[AlterAssetTagGroupsData]>`
+- **Parameters**:
+ ```ts
+ type AlterAssetTagGroupsData = {
+ headTags: Array;
+ bodyTags: Array;
+ outputName: string;
+ plugin: {
+ options: HtmlRspackPluginOptions;
+ };
+ };
+ ```
+
+:::warning Warning
+Only `headTags` and `bodyTags` can be modified. Modifications to other items will not take effect.
+:::
+
+The following code moves the `async` `script` tags from `body` to `head`:
+
+```js title="rspack.config.js"
+const MoveTagsPlugin = {
+ apply: function (compiler) {
+ compiler.hooks.compilation.tap('MoveTagsPlugin', compilation => {
+ HtmlWebpackPlugin.getCompilationHooks(
+ compilation,
+ ).alterAssetTagGroups.tapPromise('MoveTagsPlugin', async data => {
+ data.headTags.push(data.headTags.bodyTags.filter(i => i.async));
+ data.bodyTags = data.bodyTags.filter(i => !i.async);
+ });
+ });
+ },
+};
+
+module.exports = {
+ //...
+ plugins: [
+ new HtmlRspackPlugin({
+ inject: 'body',
+ }),
+ AllHeadTagsPlugin,
+ ],
+};
+```
+
+### afterTemplateExecution
+
+This hook will be called after the template rendering is completed, but before the tags are injected.
+
+The HTML content and the tags to be injected can be modified here.
+
+- When using the function `templateContent` or the `template` ending with `.js/.cjs`, and using this function to render the template, here `html` is the result returned by the function.
+- In other scenarios, the HTML template will be compiled through a template engine inside, and here `html` is the compiled result.
+
+- **Type**: `AsyncSeriesWaterfallHook<[AfterTemplateExecutionData]>`
+- **Parameters**:
+ ```ts
+ type AfterTemplateExecutionData = {
+ html: string;
+ headTags: Array;
+ bodyTags: Array;
+ outputName: string;
+ plugin: {
+ options: HtmlRspackPluginOptions;
+ };
+ };
+ ```
+ :::warning Warning
+ Only `html`, `headTags`, and `bodyTags` can be modified. Modifications to other items will not take effect.
+ :::
+
+The following code adds `Injected by plugin` at the end of the body. Then the tags will be injected after this text. Therefore, it will be `