Guide
Tutorials
Config
API
Community
Guide
Tutorials
Config
API
Community

tools.htmlPlugin

  • Type: false | Object | Function
  • Default:
const defaultHtmlPluginOptions = {
  inject, // corresponding to the html.inject config
  favicon, // corresponding to html.favicon config
  filename, // generated based on output.distPath and entryName
  template, // defaults to the built-in HTML template path
  templateParameters, // corresponding to the html.templateParameters config
  chunks: [entryName],
  minify: { // generated based on output.disableMinimize
    removeComments: false,
    useShortDoctype: true,
    keepClosingSlash: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    removeEmptyAttributes: true,
    minifyJS, // generated based on output.charset and tools.terser.terserOptions
    minifyCSS: true,
    minifyURLs: true,
  },
};

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

Disable HTML

The built-in html-webpack-plugin plugins can be disabled by set tools.htmlPlugin to false.

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

Disable JS/CSS minify

By default, Builder will compresses JavaScript/CSS code inside HTML during the production build to improve the page performance. This ability is often helpful when using custom templates or inserting custom scripts.

However, when output.enableInlineScripts or output.enableInlineStyles is turned on, inline JavaScript/CSS code will be repeatedly compressed, which will have a certain impact on build performance. You can modify the default minify behavior by modifying the tools.htmlPlugin.minify configuration.

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

For detailed usage, please refer to Rsbuild - tools.html.