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 的值是一个对象,key 是入口名称,value 是入口模块的路径,或是一个 描述对象

当 value 为路径时,它可以为绝对路径或相对路径,相对路径会基于 root 进行解析。

HTML 生成

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 文件:

  • 将入口描述对象中的 html 属性设置为 false 来禁用单个入口的 HTML 生成。
  • tools.htmlPlugin 设置为 false 来禁用所有入口的 HTML 生成。

描述对象

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

html 属性

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

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

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

在上述例子中,构建时会生成 foo.html 文件,而 bar.html 文件不会生成。

关于描述对象的完整用法,请参考 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,
    },
  };
});