CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

Entry

输入:该选项用于设置 Rspack 构建的入口。

  • 类型:

    type EntryDescription = {
      import: EntryItem;
      runtime?: EntryRuntime;
      chunkLoading?: ChunkLoading;
      asyncChunks?: boolean;
      publicPath?: PublicPath;
      baseUri?: string;
      filename?: EntryFilename;
    };
    
    type EntryObject = {
      [k: string]: EntryItem | EntryDescription;
    };
    
    type Config = {
      entry: EntryItem | EntryObject;
    };
  • 默认值: ./src/index.js

单个入口

当你构建一个单页面应用(SPA),或是构建一个库时,通常只需要设置单个入口。

设置单个入口时,直接将入口模块的路径作为字符串传入 entry 配置项即可。

rspack.config.js
module.exports = {
  entry: './src/index.js',
};

以上写法会自动将入口模块的名称设置为 main,等价于以下写法:

rspack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
  },
};

路径类型

入口模块的路径可以是一个相对路径,也可以是一个绝对路径。

entry 被设置为相对路径时,Rspack 会使用 context 配置项 设置的值作为基础路径,默认为 Node.js 进程的当前工作目录,即 process.cwd()

你也可以使用 Node.js 中的 path 模块 来生成一个绝对路径,并传递给 entry 配置项:

rspack.config.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
};

入口数组

在设置入口的值时,除了设置为 string,你也可以传入一个 string[],这代表该入口中包含多个入口模块。

比如以下示例,会将 pre.jspost.js 构建到 page 的产物中。

rspack.config.js
module.exports = {
  entry: {
    page: ['./src/pre.js', './src/post.js'],
  },
};

多个模块会按照数组定义的顺序依次执行,因此 pre.js 的代码会早于 post.js 的代码执行。

多个入口

当你需要同时构建多个入口时,你需要将 entry 设置为一个对象,对象的每一个 key 对应一个入口名称。

比如以下示例,会将 page1page2 作为两个入口进行构建:

rspack.config.js
module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js',
  },
};

入口描述对象

当你将 entry 设置为一个对象时,可以将入口的值设置为一个描述对象。描述对象可以包含以下属性:

EntryDescription.import

  • 类型:

    type EntryItem = string[] | string;
  • 默认值: './src/index.js'

入口模块的路径

EntryDescription.runtime

  • 类型:

    type EntryRuntime = false | string;
  • 默认值: undefined

运行时 chunk 的名称。设置 runtime 后,会创建一个新的运行时 chunk。你也可以将它设置为 false 来避免一个新的运行时 chunk。

runtime 属性用于设置运行时 chunk 的名称,比如将 main 入口的 chunk 名称设置为 'foo'

rspack.config.js
module.exports = {
  entry: {
    main: {
      import: './src/index.js',
      runtime: 'foo',
    },
  },
};

EntryDescription.chunkLoading

  • 类型:

    type ChunkLoading = false | ChunkLoadingType;
    type ChunkLoadingType =
      | ('jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import')
      | string;
  • 默认值: undefined

决定该入口在加载 chunk 时的加载方式。

EntryDescription.asyncChunks

  • 类型: boolean
  • 默认值: true

是否为该入口创建按需加载的异步 chunk。

EntryDescription.publicPath

  • 类型:

    type PublicPath = 'auto' | string;
  • 默认值: undefined

修改该入口引用的资源的 publicPath。

EntryDescription.baseUri

  • 类型: string
  • 默认值: undefined

修改该入口引用的资源的 baseURI。

EntryDescription.filename

  • 类型: string
  • 默认值: undefined

修改该入口所生成 chunk 的文件名。

EntryDescription.library

修改该入口所生成 chunk 作为库的导出格式,详细配置可参考 output.library