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 配置项即可。

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

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

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

路径类型#

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

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

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

const path = require('path');

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

入口数组#

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

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

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

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

多个入口#

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

比如以下示例，会将 page1 和 page2 作为两个入口进行构建：

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'：

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。

动态入口#

如果传入一个函数，那么它将会在每次 make 事件中被调用。

要注意的是，make 事件在 webpack 启动和每当监听文件变化时都会触发。

module.exports = {
  //...
  entry: () => './demo',
};

或者

module.exports = {
  //...
  entry: () => new Promise(resolve => resolve(['./demo', './demo2'])),
};

例如，你可以使用动态入口来从外部来源（远程服务器，文件系统内容或者数据库）获取真正的入口：

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // 返回一个会被用像 ['src/main-layout.js', 'src/admin-layout.js'] 的东西 resolve 的 promise
  },
};

当和 output.library 选项结合：如果传入的是一个数组，只有数组的最后一个条目会被导出。