Webpack EntryPoint配置

Entry Points

文档地址
webpack支持多种方式定义entry属性。

Single Entry[shorthand] Syntax

entry: string|Array
webpack.config.js

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

module.exports = config;

该配置语法可以缩写为

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

当将entry设置为array时。会创建位multi-main enty.
在多个以来文件打包成一个chunk的场景会比较有用
当快速配置webpack时，使用这种方式会比较好，但使用该种语法扩展性会比较差。

Object Syntax

entry: {[entryChunkName: string]: string|Array}

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

使用object语法定义entry point。是扩展性最佳的定义方式。

Scalable webpack configurations指可以重用的方便跟其他配置结合的通用配置。
该方式是比较流行的技术，用来分离environment,build target,runtime。
使用webpack-merge将这些配置进行整合。

Scenarios

下面是真实项目中的一些配置

Separate App and Vendor Entries

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

上面的配置做了什么？

首先让webpack从app.js和vendors.js开始创建依赖图(dependcy graph)。
这两个依赖图是完全独立的(每个生成的bundle(每张依赖图对应的bundle)中都会包含bootstrap)
上面的配置一般适用于只包含一个entry point的SPA应用.（不包括vendors）

为什么要这么做

这样配置可以将vendor引用从app bundle中抽取到vender bundle。将这些替换为__webpack_reuire__()调用。
如果在appbundle中没有vendor代码，那可以使用常用模式longterm vendor-caching

Multi Page Application

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

上面的配置做了什么？

让webpack创建三个独立的依赖图

为什么要这么做?

在多页应用中，server将会获取HTML文档。页面重载，
新的html及新资源会被重新下载。基于这个机制我们可以做如下的事情。

• 使用CommonsChunkPlugin创建多页中的公用的内容。多页应用会重用entry
  point中的code/modules。

根据经验，每个HTML文档都要制定一个entry point