html.templateParameters#

• Type: Record<string, unknown> | Function
• Default:

type DefaultParameters = {
  mountId: string; // the value of html.mountId config
  entryName: string; // entry name
  assetPrefix: string; // the value of dev.assetPrefix or output.assetPrefix configs
  compilation: Compilation; // Compilation object of Rspack
  // htmlWebpackPlugin built-in parameters
  // See https://github.com/jantimon/html-webpack-plugin for details
  htmlWebpackPlugin: {
    tags: object;
    files: object;
    options: object;
  };
};

Define the parameters in the HTML template, corresponding to the templateParameters config of html-webpack-plugin.

Object Usage#

If the value of templateParameters is an object, it will be merged with the default parameters using Object.assign.

For example, if you need to use the foo parameter in an HTML template, you can add the following settings:

export default {
  html: {
    templateParameters: {
      foo: 'bar',
    },
  },
};

Then, you can read the parameter in the HTML template using <%= foo %>:

<script>
  window.foo = '<%= foo %>';
</script>

The compiled HTML code will be:

<script>
  window.foo = 'bar';
</script>

Function Usage#

• Type:

type TemplateParametersFunction = (
  defaultValue: Record<string, unknown>,
  utils: { entryName: string },
) => Record<string, unknown> | void;

When html.templateParameters is of type Function, the function receives two parameters:

• value: Default templateParameters configuration of Rsbuild.
• utils: An object containing the entryName field, corresponding to the name of the current entry.

In the context of a multi-page application (MPA), you can set different templateParameters based on the entry name:

export default {
  html: {
    templateParameters(defaultValue, { entryName }) {
      const params = {
        foo: {
          ...defaultValue,
          type: 'Foo',
        },
        bar: {
          ...defaultValue,
          type: 'Bar',
          hello: 'world',
        },
      };
      return params[entryName] || defaultValue;
    },
  },
};