Webpack基础之入口起点

入口起点(Entry Points)

单个入口（简写）语法：

用法：entry: string|Array<string>

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

当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。传入数组这种方式有助于，在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时。

对象语法：

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

这里指定了两个入口，这里的 app 和 vendors 作为入口的名字，在配置 output 的时候可以用到

分离 应用程序(app) 和 公共库(vendor) 入口:

从表面上看，这告诉我们 webpack 从 app.js 和 vendors.js 两个入口文件开始创建依赖图表(dependency graph)。这些图表是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括公共库 vendor）的单页应用程序(single page application)中。
假设 app 中引用了 vendors，这个时候打包后，app 中依旧包含了 vendors 中的代码，为此，需要使用 CommonsChunkPlugin 这个插件。来去除掉 app 中存在于 vendors 中的代码。使用了这个插件之后，会得到一个 commom 模块，vendors 模块中只有一句话，就是引用这个 common 模块。这种情况，可以配置 CommonsChunkPlugin 插件，让它得到的 common 模块的命名和 vendors 一样，这样就把 vendors 覆盖了。

多个页面应用程序：

我们告诉 webpack 需要 3 个独立分离的依赖图表

假如有 3 个页面，他们都应用了其中一个库，由于是单页应用，每次跳转都会刷新页面，重新加载脚本，因此可以将三个页面公用的类库打包为单个文件，这样其他页面可以利用前一个页面缓存下来的类库。同样的这个时候，也需要使用到 CommonsChunkPlugin 这个插件