入口（entry）

正如我们在 介绍中提到的,在 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，应当只使用一个入口点。

下一篇：出口