English

简体中文

html.inject

Type: 'head' | 'body' | boolean | Function
Default: 'head'

Set the inject position of the <script> tag.

Can be set to the following values:

'head': The <script> tag will be inject inside the <head> tag.
'body': The <script> tag is inject at the end of the <body> tag.
true: Automatic judgement based on the html.scriptLoading, if set to 'blocking', it will inject into the <body> tag, otherwise it will inject into the <head> tag.
false: <script> tags will not be injected.

Default inject position

The <script> tag is inside the head tag by default:

<html>
  <head>
    <title></title>
    <script defer src="/static/js/runtime-main.js"></script>
    <script defer src="/static/js/main.js"></script>
    <link href="/static/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Inject into body

Add the following config to inject <script> into the <body> tag:

export default {
  html: {
    inject: 'body',
  },
};

You will see that the script tag is generated at the end of the body tag:

<html>
  <head>
    <title></title>
    <link href="/static/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <script defer src="/static/js/runtime-main.js"></script>
    <script defer src="/static/js/main.js"></script>
  </body>
</html>

Function usage

Type:

type InjectFunction = ({ value: ScriptInject; entryName: string }) => string | void;

When html.inject is of type Function, the function receives an object as its parameter, with the following properties:

value: the default inject configuration of Rsbuild.
entryName: the name of the current entry.

In the context of MPA (Multi-Page Application), you can set different inject behaviors based on the entry name:

export default {
  html: {
    inject({ entryName }) {
      return entryName === 'foo' ? 'body' : 'head';
    },
  },
};

Manual injection

When html.inject is set to false, Rsbuild will not inject tags into the HTML, and the tags defined in html.tags will not take effect.

At this time, you can access all the tags to be injected through the htmlPlugin.tags template parameter, and manually inject them into the specified position.

For example, insert the <script> tag generated by Rsbuild between a.js and b.js:

index.html

<html>
  <head>
    <script src="https://example.com/a.js"></script>
    <%= htmlPlugin.tags.headTags %>
    <script src="https://example.com/b.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <%= htmlPlugin.tags.bodyTags %>
  </body>
</html>

html.inject

Type: 'head' | 'body' | boolean | Function
Default: 'head'

Set the inject position of the <script> tag.

Can be set to the following values:

'head': The <script> tag will be inject inside the <head> tag.
'body': The <script> tag is inject at the end of the <body> tag.
true: Automatic judgement based on the html.scriptLoading, if set to 'blocking', it will inject into the <body> tag, otherwise it will inject into the <head> tag.
false: <script> tags will not be injected.

Default inject position

The <script> tag is inside the head tag by default:

<html>
  <head>
    <title></title>
    <script defer src="/static/js/runtime-main.js"></script>
    <script defer src="/static/js/main.js"></script>
    <link href="/static/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Inject into body

Add the following config to inject <script> into the <body> tag:

export default {
  html: {
    inject: 'body',
  },
};

You will see that the script tag is generated at the end of the body tag:

<html>
  <head>
    <title></title>
    <link href="/static/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <script defer src="/static/js/runtime-main.js"></script>
    <script defer src="/static/js/main.js"></script>
  </body>
</html>

Function usage

Type:

type InjectFunction = ({ value: ScriptInject; entryName: string }) => string | void;

When html.inject is of type Function, the function receives an object as its parameter, with the following properties:

value: the default inject configuration of Rsbuild.
entryName: the name of the current entry.

In the context of MPA (Multi-Page Application), you can set different inject behaviors based on the entry name:

export default {
  html: {
    inject({ entryName }) {
      return entryName === 'foo' ? 'body' : 'head';
    },
  },
};

Manual injection

When html.inject is set to false, Rsbuild will not inject tags into the HTML, and the tags defined in html.tags will not take effect.

At this time, you can access all the tags to be injected through the htmlPlugin.tags template parameter, and manually inject them into the specified position.

For example, insert the <script> tag generated by Rsbuild between a.js and b.js:

index.html

<html>
  <head>
    <script src="https://example.com/a.js"></script>
    <%= htmlPlugin.tags.headTags %>
    <script src="https://example.com/b.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <%= htmlPlugin.tags.bodyTags %>
  </body>
</html>

#html.inject

#Default inject position

#Inject into body

#Function usage

#Manual injection

#html.inject

#Default inject position

#Inject into body

#Function usage

#Manual injection

html.inject

Default inject position

Inject into body

Function usage

Manual injection

html.inject

Default inject position

Inject into body

Function usage

Manual injection