close
  • English

      • 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
  rspackConfig: Rspack.Configuration; // Rspack config object
  // generated by html-rspack-plugin
  htmlPlugin: {
    tags: {
      headTags: HtmlTagObject[];
      bodyTags: HtmlTagObject[];
    };
    files: {
      publicPath: string;
      js: string[];
      css: string[];
      favicon?: string;
    };
  };
};

      Define the parameters in the HTML template, see HTML Template - Template Parameters for detailed usage.

      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:

      rsbuild.config.ts
      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:

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