tools.htmlPlugin
- 类型:
boolean | Object | Function
- 默认值:
const defaultOptions = {
meta, // 对应 `html.meta` 配置
title, // 对应 `html.title` 配置
inject, // 对应 `html.inject` 配置
favicon, // 对应 `html.favicon` 配置
template, // 对应 `html.template` 配置
filename, // 基于 `output.distPath` 和 `entryName` 生成
templateParameters, // 对应 `html.templateParameters` 配置
chunks: [entryName],
};
通过 tools.htmlPlugin
可以修改 html-rspack-plugin 的配置项。
Object 类型
当 tools.htmlPlugin
的值为 Object
类型时,会与默认配置通过 Object.assign
合并。
export default {
tools: {
htmlPlugin: {
scriptLoading: 'blocking',
},
},
};
Function 类型
当 tools.htmlPlugin
为 Function 类型时:
- 第一个参数是默认配置的对象,可以直接修改该对象。
- 第二个参数是也是一个对象,包含了 entry 的名称和 entry 的值。
- 函数可以 return 一个新的对象作为最终的配置。
export default {
tools: {
htmlPlugin(config, { entryName, entryValue }) {
if (entryName === 'main') {
config.scriptLoading = 'blocking';
}
},
},
};
禁用 HTML
将 tools.htmlPlugin
配置为 false
,可以禁用 Rsbuild 内置的 html-rspack-plugin
插件,此时将不会生成 HTML 产物。
export default {
tools: {
htmlPlugin: false,
},
};
示例
修改 HTML 文件名
通过 filename
选项可以修改 HTML 产物的文件名。
例如,在生产模式构建时,可以在文件名上添加 hash
:
export default {
tools: {
htmlPlugin(config, { entryName }) {
if (process.env.NODE_ENV === 'production') {
config.filename = `${entryName}.[contenthash:8].html`;
}
},
},
};
HTML 压缩
Rsbuild 目前不对 HTML 文件进行压缩,如果你需要压缩 HTML 文件,可以使用 rsbuild-plugin-html-minifier-terser 插件。