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:
比如为 web
和 node
环境设置不同的 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,
},
};
});