webpack - 静态模块打包器 1. 入口起点（entry points）

配置文件中entry接受三种形式的值：字符串，数组和对象。

1. 对象entry

对象形式如下：

entry: {
   <key>: <value>
   ...
}

最先介绍对象形式，是因为这个是最完整的entry配置，其他形式只是它的简化形式而已。对象中的每一对属性对，都代表着一个入口文件，因此多页面配置时，肯定是要用这种形式的entry配置。

- key
1. key 可以是简单的字符串，比如：’app’, ‘main’, ‘entry-1’等。并且对应着output.filename 配置中的[name]变量。
2. key 还可以是路径字符串。此时webpack会自动生成路径目录，并将路径的最后作为[name]。这个特性在多页面配置下也是很有用的。
- value
1. value如果是字符串，而且必须是合理的noderequire函数参数字符串。比如文件路径：’./app.js’(require(‘./app.js’))；比如安装的npm模块：’lodash’(require(‘lodash’))
2.value如果是数组，则数组中元素需要是上面描述的合理字符串值。数组中的文件一般是没有相互依赖关系的，但是又处于某些原因需要将它们打包在一起。

2. 字符串和数组entery

---

高阶部分：

1. 对象入口

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

“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

分离 应用程序(app) 和 第三方库(vendor) 入口

这是什么？从表面上看，这告诉我们 webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。

为什么？此设置允许你使用 CommonsChunkPlugin 从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle，并把引用 vendor 的部分替换为 webpack_require() 调用。如果应用程序 bundle 中没有 vendor 代码，那么你可以在 webpack 中实现被称为长效缓存的通用模式。

令人困惑的 webpack 之 entry
入口起点(entry points)