webpack入口起点

入口起点:根上下文(contextual root) 或 app 第一个启动文件。entry 属性来定义入口

文件：webpack.config.js

一.语法

1.单个入口（简写）语法 

（1）.用法：

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

module.exports = config;

entry 属性的单个入口语法，是下面的简写：

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

（2）.场合使用：
只有一个入口起点的应用程序或工具（即 library）」快速设置 webpack 配置的时候，这会是个很不错的选择。
然而，使用此语法在扩展配置时有失灵活性。

注意：
向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

2.对象语法

用法：

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

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

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

二.常见场景

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

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

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

2.多页面应用程序

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

webpack 需要 3 个独立分离的依赖图。在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。

三.“entry”——字符串VS数组VS对象

entry告诉Webpack入口文件或者起点在哪里。它可以是一个字符串，一个数组或者一个对象。这可能会使你感到困惑，但不同的类型适用于不同的场合。
      如果你使用的是单个起点（大部分项目都是如此），那么你可以使用任意的类型，它们的结果都会是一样的。

1.entry——数组

但是，如果你想要添加互不依赖的多个文件，你可以使用数组的格式。
举个栗子，你的HTML可能需要“googleAnalytics.js”。你可以告诉Webpack在bundle.js的后面把它添加进去：

2.entry——对象

现在，当你有一个包含多个HTML文件的多页应用，而不是单页应用的项目的时候（index.html和profile.html），你可以通过对象格式告诉Webpack去一次性生成多个bundle文件。

下面的配置会生成两个JS文件：indexEntry.js和profileEntry.js，你可以在index.html和profile.html分别使用它们：

使用方法：

//profile.html
<script src=”dist/profileEntry.js”></script>

//index.html
<script src=”dist/indexEntry.js”></script>

注意：文件名来自“entry”对象的key。

3.entry——组合格式

你也可以在entry对象中使用数组。下面的例子会生成三个文件：一个包含三个文件的vendor.js，一个index.js和一个profile.js。