webpack之入口起点（一）

在 webpack 配置中有多种方式定义 entry 属性。

单个入口语法

用法：entry: string|Array<string>

// 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以数组形式传入多个值时，webpack将会创建多个主入口。

对象语法

分离应用程序（app）和第三方库（vendor）入口。

用法：entry: {[entryChunkName: string]: string|Array<string>}

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

定义入口的最可扩展的方式。这告诉我们 webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。

多页面应用程序

// 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 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。