close
Guide
Config
Plugin
API
Community
Version
Guide
Config
Plugin
API
Community

source.entry

  • Type:
type Entry = Record<
  string,
  string | string[] | (Rspack.EntryDescription & { html?: boolean })
>;
  • Default:
const defaultEntry = {
  // Rsbuild also supports other suffixes by default, such as ts, tsx, jsx, mts, cts, mjs, cjs
  index: './src/index.js',
};

Set the entry modules for building.

The value of source.entry is an object, the key is the entry name, and the value is the path of the entry module or a description object.

If the value is a path, it can be an absolute path or a relative path, the relative path will be resolved based on root.

HTML generation

Rsbuild will register html-rspack-plugin for each entry in source.entry and generate the corresponding HTML files.

  • Example:
rsbuild.config.ts
export default {
  source: {
    entry: {
      foo: './src/pages/foo/index.ts', // generate foo.html
      bar: './src/pages/bar/index.ts', // generate bar.html
    },
  },
};

The generated directory structure is as follows:

.
├── foo.html
├── bar.html
└── static
    ├── css
    │   ├── foo.css
    │   └── bar.css
    └── js
        ├── foo.js
        └── bar.js

If you do not need to generate HTML files:

  • Set the html property to false in the entry description object to disable the HTML generation for a single entry.
  • Set tools.htmlPlugin to false to disable the HTML generation for all entries.

Description object

source.entry also supports Rspack's entry description object. For example:

rsbuild.config.ts
export default {
  source: {
    entry: {
      foo: {
        import: './src/foo.js',
        runtime: 'foo',
      },
      bar: {
        import: './src/bar.js',
        runtime: 'bar',
      },
    },
  },
};

html property

Rsbuild has added an html property for the description object, which is used to control whether an HTML file is generated.

For example, the bar entry does not generate an HTML file:

rsbuild.config.ts
export default {
  source: {
    entry: {
      foo: './src/foo.js',
      bar: {
        import: './src/bar.js',
        html: false,
      },
    },
  },
};

In the above example, foo.html will be generated, while bar.html will not be generated.

For detailed usage of the description object, refer to Rspack - Entry description object.

Set by environment

When you build for multiple environments, you can set different entry for each environment:

For example, set different entry for web and node environments:

rsbuild.config.ts
export default {
  environments: {
    web: {
      source: {
        entry: {
          index: './src/index.client.js',
        },
      },
      output: {
        target: 'web',
      },
    },
    node: {
      source: {
        entry: {
          index: './src/index.server.js',
        },
      },
      output: {
        target: 'node',
      },
    },
  },
};

Asynchronous setting

To set entry asynchronously, for example, use glob to scan the directory, you can export an async function in rsbuild.config.ts:

rsbuild.config.ts
import path from 'node:path';
import { glob } from 'glob';
import { defineConfig } from '@rsbuild/core';

export default defineConfig(async () => {
  const entryFiles = await glob('./src/**/main.{ts,tsx,js,jsx}');

  const entry = Object.fromEntries(
    entryFiles.map((file) => {
      const entryName = path.basename(path.dirname(file));
      return [entryName, `./${file}`];
    }),
  );

  return {
    source: {
      entry: entry,
    },
  };
});