Entry Points（入口点）¹

在前面的介绍我们提到，webpack配置中有多种方式定义entry属性。接下来我们会教你可以用哪些方式配置entry属性，并且说明为什么它会对你很有帮助。

单入口（简写）语法

用法：entry: string|Array<string>

webpack.config.js

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

entry属性的单入口语法是下列写法的简写方式：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

ℹ️当你传递一个数组给entry会发生什么？传递一个文件路径的数组给entry属性，将会创建一个所谓的“多个main的入口”。当你想一起注入多个相互依赖的文件、把它们的依赖放在一个块（chunk）时，这个会很有用。

如果你想为只有一个入口的应用或工具找个快速设置的webpack配置，单入口语法是很不错的选择。但是，这种语法对于扩展、伸缩你的配置没有很多的灵活性。

对象语法

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

webpack.config.js

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

对象语法更为冗长。但是，这种语法对定义应用的入口来说伸缩性最好。

“ℹ️可伸缩的webpack配置”是指那些可以重用、和其他局部配置结合的。这是一个流行的技术，用来分离来自environment、build target和runtime的影响。这样它们就能用特殊的工具，比如webpack-merge来合并。

场景

接下来是一些entry配置和它们在现实世界的使用案例：

分开App和Vendor入口

webpack.config.js

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

这个配置做了什么？从表面上来看，它告诉webpack创建以app.js和vendor.js为起点的依赖图。这些图彼此是完全分开、独立的（每一个bundle里面都会有一个webpack bootstrap）。这在只有一个入口的单页应用中很常见（不包括vendors）。

为什么这样做？这个设置允许你利用CommonsChunkPlugin、从你的app bundle里提取任何vendor引用，打包到vendor bundle中，然后用__webpack_require__()调用来替换vendor引用。如果你的app bundle没有vendor的代码，你就能实现一个所谓的永久vendor缓存的通用模式。

[TODO] 考虑移除这个场景，优先使用DllPlugin，其能提供更好的vendor分割。

多页应用

webpack.config.js

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

这个配置做了什么？我们在告诉webpack，我们要3个分开的依赖图（像上面的例子）。

为什么这样做？在多页应用中，服务器要为你抓取一个新的HTML文档。页面会重新加载这个文档，资源也会重新下载。而这给了我们独特的机会来做多件事情：

• 使用CommonsChunkPlugin来创建多个页面之间共用的应用代码bundle。这些技术使在多个入口重用很多代码/模块的多页应用受益匪浅，入口越多受益越大。

ℹ️经验法则：为每一个HTML文档仅使用一个入口点。

¹. https://webpack.js.org/concepts/entry-points/ ↩