html.templateParameters
- 类型：
Record<string, unknown> | Function
- 默认值：
type DefaultParameters = {
mountId: string; // 对应 html.mountId 配置
entryName: string; // 入口名称
assetPrefix: string; // 对应 dev.assetPrefix 和 output.assetPrefix 配置
compilation: Compilation; // Rspack 的 compilation 对象
rspackConfig: Rspack.Configuration; // Rspack 的配置对象
// html-rspack-plugin 生成的参数
htmlPlugin: {
tags: {
headTags: HtmlTagObject[];
bodyTags: HtmlTagObject[];
};
files: {
publicPath: string;
js: Array<string>;
css: Array<string>;
favicon?: string;
};
};
};
定义 HTML 模板中的参数，详细用法请参考 配置 HTML 模板 - 模板参数。
对象用法
如果 templateParameters 的值是一个对象，它会和默认参数通过 Object.assign 合并。
比如，如果你需要在 HTML 模板中使用 foo 参数，可以添加如下设置：
export default {
html: {
templateParameters: {
foo: 'bar',
},
},
};
接下来，你可以在 HTML 模板中，通过 <%= foo %> 来读取参数：
<script>
window.foo = '<%= foo %>';
</script>
编译后的 HTML 代码如下：
<script>
window.foo = 'bar';
</script>
函数用法
type TemplateParametersFunction = (
defaultValue: Record<string, unknown>,
utils: { entryName: string },
) => Record<string, unknown> | void;
当 html.templateParameters 为 Function 类型时，函数接收两个参数：
value：Rsbuild 的默认 templateParameters 配置。utils: 一个对象，其中包含了 entryName 字段，对应当前入口的名称。
在 MPA（多页面应用）场景下，你可以基于入口名称设置不同的 templateParameters 参数：
export default {
html: {
templateParameters(defaultValue, { entryName }) {
const params = {
foo: {
...defaultValue,
type: 'Foo',
},
bar: {
...defaultValue,
type: 'Bar',
hello: 'world',
},
};
return params[entryName] || defaultValue;
},
},
};
