指南
教程
配置
API
社区
指南
教程
配置
API
社区
简体中文

tools.htmlPlugin

  • 类型： false | Object | Function
  • 默认值：
const defaultHtmlPluginOptions = {
  inject, // 对应 html.inject 配置项
  favicon, // 对应 html.favicon 配置项
  filename, // 基于 output.distPath 和 entryName 生成
  template, // 默认为内置的 HTML 模板路径
  templateParameters, // 对应 html.templateParameters 配置项
  chunks: [entryName],
  minify: { // 基于 output.disableMinimize 生成
    removeComments: false,
    useShortDoctype: true,
    keepClosingSlash: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    removeEmptyAttributes: true,
    minifyJS, // 基于 output.charset 和 tools.terser.terserOptions 生成
    minifyCSS: true,
    minifyURLs: true,
  },
};

通过 tools.htmlPlugin 可以修改 html-webpack-plugin 或 html-rspack-plugin 的配置项。

禁用 HTML

将 tools.htmlPlugin 配置为 false，可以禁用默认的 html-webpack-plugin 插件。

export default {
  tools: {
    htmlPlugin: false,
  },
};

禁用 JS / CSS 压缩

默认情况下，Builder 会在生产环境构建时压缩 HTML 内的 JavaScript / CSS 代码，从而提升页面性能。此能力通常在使用自定义模版或插入自定义脚本时会有帮助。然而，当开启 output.enableInlineScripts 或 output.enableInlineStyles 时，会出现对 inline JavaScript / CSS 代码重复压缩的情况，对构建性能会有一定影响。你可以通过修改 tools.htmlPlugin.minify 配置项来修改默认的压缩行为。

export default {
  tools: {
    htmlPlugin: config => {
      if (typeof config.minify === 'object') {
        config.minify.minifyJS = false;
        config.minify.minifyCSS = false;
      }
    },
  },
};

详细用法可参考 Rsbuild - tools.htmlPlugin。