简体中文

tools.htmlPlugin

类型： boolean | Object | Function
默认值：

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

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

TIP

Rsbuild 内部基于 html-rspack-plugin 实现 HTML 相关的能力。它是 html-webpack-plugin 的一个 fork 版本，具备完全一致的功能和选项。

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`;
      }
    },
  },
};

禁用 JS / CSS 压缩

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

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

tools.htmlPlugin#

Object 类型#

Function 类型#

禁用 HTML#

示例#

修改 HTML 文件名#