正如我们在 介绍中提到的,在 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属性传入文件路径数组 将创建 “多个主入口”。当你想要将多个依赖文件一起注入，并且将它们的依赖映射到一个“块(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）把它们合并在一起。
常见场景
请参考以下列出的入口配置以及相应实例：
入口分离 应用 和 公共库
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
做了什么?
从表面上看，这告诉我们 webpack从 app.js和 vendors.js开始创建依赖图。这些依赖图完全分离、互相独立（每个包都会有一个自己的webpack bootstrap）。通常这种配置适用于只有单入口的单页应用（不包括公共库）。
为什么这么做?
如此设置并使用 CommonsChunkPlugin插件 ，将公共引用从应用程序包中提取到公共库包中，并把公共引用的部分替换为__webpack_require__()调用。公共代码独立打包之后，那么你就实现了webpack 中我们所熟知的 长效缓存 。
多页应用
webpack.config.js
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
做了什么?
我们告诉webpack我们有三个独立的依赖图 。
为什么这么做?
在多页应用中，页面切换时，当服务器为您获取一个新的 HTML。页面会重新加载新HTML文件，并且重新下载资源。这样就有机会去做很多事：
- 运用
CommonsChunkPlugin在每个页面间创建共享包。由于入口点增多，这样的新技术让多页应用能够在各入口点重用大量代码/模块，从而从中受益。
通常来说：对于每个HTML，应当只使用一个入口点。
下一篇：出口
