How to add multiple chunks/entries to a generated HTML page

[mmazzarolo]

Hi there! We recently started using Rsbuild at my company and it's been amazing so far, great work!
I'm wondering if there's a way to include multiple chunks (specified in source.entry) within a single generated HTML file?
Basically what we're trying to achieve is that by having a config like this:

export default defineConfig({
  source: {
    entry: {
      additionalChunk: "./src/additiona-chunk",
      index: "./src/core",
    },
});

We'd like to have a single HTML in the output that includes both chunks/scripts.
The way we're doing this is by manually overriding the chunks value of the HTMLConfig:

export default defineConfig({
  tools: {
    htmlPlugin: (htmlConfig, { entryName }) => {
      if (entryName === "index") {
        htmlConfig.chunks = ["additionalChunk", "index"];
        htmlConfig.chunksSortMode = "manual";
        }
      }
  }
});

But this seems rather hacky, and at the end of the day we're still generating one additional HTML file for additionalChunk (since each entry produces an HTML file out-of-the-box, and you can disable this behaviour by setting htmlPlugin: false only globally, not on a per-entry basis). I also tried playing with the dependOn entry setting, but with the same result.
Does a "nicer" way to do this exist ? 👀

Oh, and one more thing! I might have missed it, but is there a way to have the "./src/core" entry HTML be served at the root without naming it index?

Thanks, and keep up with the great work!

[chenjiahan]

Thank you for your support and detailed questions ❤️

is there a way to have the "./src/core" entry HTML be served at the root without naming it index?

I can answer this question first (it's simpler), we just need to set historyApiFallback to the specified HTML file, like this:

// rsbuild.config.ts
export default defineConfig({
  source: {
    entry: {
      foo: './src/index.jsx',
    },
  },
  server: {
    historyApiFallback: {
      index: '/foo.html',
    },
  },
});

And there are some document for this: https://rsbuild.dev/guide/basic/server#custom-fallback-behavior

[chenjiahan]

To add multiple entries in a single HTML page, it is recommended to use entry[].dependOn.

Rsbuild will support the following usage in the next release:

export default defineConfig({
  source: {
    entry: {
      index: {
        import: './src/index.js',
        // add pre.js to index.html
        dependOn: 'pre',
      },
      pre: './src/pre.js',
    },
  },
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      // remove pre.html
      chain.plugins.delete(`${CHAIN_ID.PLUGIN.HTML}-pre`);
    },
  },
});

see: #2292

Note that we need to use bundlerChain to remove the generated pre.html, as Rsbuild currently does not provide configuration to remove specified HTML files.

[mmazzarolo]

Rsbuild will support the following usage in the next release:

Ah! That's what I was missing and probably why it wasn't working for me:)
Awesome, thanks for sharing 🙏