html.inject
- 类型：
'head' | 'body' | boolean | Function
- 默认值：
'head'
修改构建产物中 <script> 标签在 HTML 中的插入位置。
可以设置为以下值：
'head'：<script> 标签会插入在 HTML 的 <head> 标签内。'body'：<script> 标签会插入在 HTML 的 <body> 标签尾部。true：基于 html.scriptLoading 自动判断，设置为 'blocking' 时插入 <body> 标签，否则插入 <head> 标签。false：<script> 标签不插入 HTML 中。
默认插入位置
<script> 标签默认在 head 标签内：
<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>
插入至 body 标签
添加如下配置，可以将 <script> 插入至 <body> 标签：
rsbuild.config.ts
export default {
html: {
inject: 'body',
},
};
可以看到 <script> 标签生成在 body 标签尾部：
<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>
函数用法
type InjectFunction = ({ value: ScriptInject; entryName: string }) => string | void;
当 html.inject 为 Function 类型时，函数接收一个对象作为入参，对象的值包括：
value：Rsbuild 的默认 inject 配置。entryName: 当前入口的名称。
在 MPA（多页面应用）场景下，你可以基于入口名称设置不同的 inject 方式：
rsbuild.config.ts
export default {
html: {
inject({ entryName }) {
return entryName === 'foo' ? 'body' : 'head';
},
},
};
手动注入
当 html.inject 设置为 false 时，Rsbuild 不会在 HTML 中自动插入标签，html.tags 中定义的标签也不会生效。
此时，你可以通过 htmlPlugin.tags 模板参数来访问所有待注入的标签，并手动插入到指定的位置。
例如，在 a.js 和 b.js 两个脚本之间插入 Rsbuild 生成的 <script> 标签：
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>
