source.entry

  • 类型:
type Entry = Record<
  string,
  string | string[] | (Rspack.EntryDescription & { html?: boolean })
>;
  • 默认值:
const defaultEntry = {
  // Rsbuild 默认也支持其他后缀名,如 ts、tsx、jsx、mts、cts、mjs、cjs
  index: './src/index.js',
};

用于设置构建的入口模块。

source.entry 的用法与 Rspack 的 entry 选项类似,它们的主要区别在于,Rsbuild 会为 source.entry 中的每一个入口注册 html-rspack-plugin,从而生成对应的 HTML 文件。

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

生成的目录结构如下:

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

如果你不需要生成 HTML 文件,可以将 tools.htmlPlugin 设置为 false 来禁用这一行为。

描述对象

source.entry 同样支持 Rspack 的 entry 描述对象写法,比如:

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

Rsbuild 为描述对象添加了 html 属性,用于控制是否生成 HTML 文件。

例如,bar 入口不生成 HTML 文件:

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

关于描述对象的完整用法,请参考 Rspack - 入口描述对象

基于 environment 设置

当你面向多个 environments 构建时,可以为每个 environment 设置不同的 entry:

比如为 webnode 环境设置不同的 entry:

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',
      },
    },
  },
};

异步设置

如果你需要异步设置 entry,例如使用 glob 来扫描目录,可以在 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,
    },
  };
});