close
  • 简体中文
  • 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,
        },
      };
    });