入口点(Entry Point)

如我们在 入门指南 中提到的,有多种方式来定义 webpack 配置中的 entry 属性。我们将向你展示这些配置 entry 属性的方法,并解释其用处。

单入口(简写)语法

用法:entry: string | Array<string>

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

entry 属性的这种单入口语法是以下形式的简写:

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

当你传递数组给 entry 时会发生什么?将文件路径数组传递给 entry 属性将创建“多个主入口(multi-main enrey)”。 这在你想要将多个依赖文件一并注入并将它们的依赖导向一个“块”(chunk)时,是有用的。

当你正在寻找为只有一个入口点的应用程序或工具(比如:库)快速设置 webpack 配置时,这是一个很好的选择。但是,使用此语法在扩展配置时没有太多的灵活性。

对象语法

用法:entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

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

对象语法比较繁琐。但是,这是在应用程序中定义入口的最具可扩展性的方式。

**“可扩展的 webpack 配置”**是一种可以重复使用并可与其他配置组合的配置。这是一种流行的技术,用于将关注点与环境,构建目标和运行时分离。 然后使用专用工具(如 webpack-merge)合并它们。

场景

下面列出一些入口配置及其实际用例:

分离应用程序和第三方厂商入口

在 webpack 4 之前的版本中,通常将供应商添加为单独的入口点,以将其编译为单独的文件(与 CommonsChunkPlugin 结合使用)。在 webpack 4 中不鼓励这样做。相反,optimization.splitChunks 选项负责分离第三方厂商和应用程序模块并创建单独的文件。不要为第三方厂商或其他不是执行起点的事物创建入口。

webpack.config.js

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

**这是在做什么?**表面上,这告诉 webpack 从 app.jsvendors.js 开始创建依赖图谱。这些图谱是完全分离,彼此独立的(每个bundle 中都有一个 webpack 引导程序)。这通常在只有一个入口点(不包括第三方厂商)的单页应用程序中可见。

为什么? 此设置允许你利用 CommonsChunkPlugin 从应用程序包中提取第三方引用到你的第三方厂商包,并用__webpack_require__() 调用替换它们。 如果应用程序包中没有第三方厂商代码,那么你可以在 webpack 中实现称为 长期供应商缓存 的通用模式。

为了支持提供了更好的第三方代码分离功能的 DllPlugin,考虑移除该场景。

多页应用

webpack.config.js

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

**这是做什么?**我们告诉 webpack 想要三个独立的依赖图谱(如上面的例子)。

**为什么?**在多页应用中,服务器将为你获取一个新的 HTML 文档。页面重新加载这个新文档,并重新下载资源。不管怎样,这给了我们独特的机会做多件事情:

  • 使用 CommonsChunkPlugin 创建所有页面共享的应用程序代码包。当入口点的数量增加时,多页面应用复用各入口间的大量代码/模块,可以极大地受益于这些技术。

一般来说,对于每个 HTML 文档,只使用一个入口点最好。