close
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

tools.htmlPlugin

  • Type: boolean | Object | Function
  • Default:
const defaultOptions = {
  meta, // Corresponds to `html.meta` config
  title, // Corresponds to `html.title` config
  inject, // Corresponds to `html.inject` config
  favicon, // Corresponds to `html.favicon` config
  template, // Corresponds to `html.template` config
  filename, // Generated based on `output.distPath` and `entryName`
  templateParameters, // Corresponds to `html.templateParameters` config
  chunks: [entryName],
};

The configs of html-rspack-plugin can be modified through tools.htmlPlugin.

TIP

Rsbuild internally implements HTML-related features based on html-rspack-plugin. It is a fork of html-webpack-plugin, with the same features and options.

Object Type

When tools.htmlPlugin is Object type, the value will be merged with the default config via Object.assign.

export default {
  tools: {
    htmlPlugin: {
      scriptLoading: 'blocking',
    },
  },
};

Function Type

When tools.htmlPlugin is a Function:

  • The first parameter is the default config, which can be modified directly.
  • The second parameter is also an object, containing the entry name and the entry value.
  • The Function can return a new object as the final config.
export default {
  tools: {
    htmlPlugin(config, { entryName, entryValue }) {
      if (entryName === 'main') {
        config.scriptLoading = 'blocking';
      }
    },
  },
};

Disable HTML

Setting tools.htmlPlugin to false can disable the built-in html-rspack-plugin in Rsbuild, and no HTML files will be generated.

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

Example

Modify HTML File Name

The filename option can be used to modify the file name of the HTML output.

For example, during production builds, a hash can be added to the file name:

export default {
  tools: {
    htmlPlugin(config, { entryName }) {
      if (process.env.NODE_ENV === 'production') {
        config.filename = `${entryName}.[contenthash:8].html`;
      }
    },
  },
};

HTML Minification

Rsbuild currently does not minify HTML files. If you need to minify HTML files, you can use the rsbuild-plugin-html-minifier-terser plugin.