webpack学习系列二（https://webpack.js.org/concepts/entry-points/ 翻译）

Entry Points

定义webpack configuration中的entry属性有很多方式，以下将阐述配置entry属性的几种方式。

Single Entry (Shorthand) Syntax

单一入口 简略写法

webpack.config.js

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

是以下写法的简略写法

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

当你把一个数组赋值给main时，叫做多入口文件

Object Syntax

webpack.config.js

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

对象语法比较冗长，但是，它是可拓展性做好的定义entry的方式。可拓展的webpack配置是指可以复用的、可以与其它配置合并的技术。根据环境、运行时等分割，之后利用webpack－merge工具合并。

Scenarios

下面是entry配置的使用示例

Separate App and Vendor Entries 分离开发入口和生产入口

webpack.config.js

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

以上代码告诉webpack既从app.js开始建立依赖图，又从vendors.js开始建立依赖图，这两个依赖图是相互分离和独立的。

为什么要这样设置呢，你可以利用CommonChunkPlugin从app代码集合中提取出任意生产标记放入你的生产代码集合中。如果你的应用程序中没有生产环境代码，那么，你可以的到webpack中的共同模式，叫做long-term vendor-caching.

Multi Page Application

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建立页面间共享的应用代码束。