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开始建立依赖图，这两个依赖图是相互分离和独立的。

Why? This setup allows you to leverage CommonsChunkPlugin and extract any vendor references from your app bundle into your vendor bundle, replacing them with __webpack_require__() calls. If there is no vendor code in your application bundle, then you can achieve a common pattern in webpack known as long-term vendor-caching.

为什么要这样设置呢，你可以利用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'  }};

What does this do? We are telling webpack that we would like 3 separate dependency graphs (like the above example).

Why? In a multi-page application, the server is going to fetch a new HTML document for you. The page reloads this new document and assets are redownloaded. However, this gives us the unique opportunity to do multiple things:

以上代码告诉webpack，我们想要3个相互独立的依赖图。

原因：在多页应用中，服务器会给你一个新的html文件，页面会重新加载，资源也会重新下载。它给予我们机会做不同的事情：

• Use CommonsChunkPlugin to create bundles of shared application code between each page. Multi-page applications that reuse a lot of code/modules between entry points can greatly benefit from these techniques, as the amount of entry points increase.

》利用CommonsChunkPlugin建立页面间共享的应用代码束。