webpack的入口起点(entry points)

概念

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

配置

单个入口（简写）语法：

用法：entry: string|Array

webpack.config.js

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

对象语法

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

webpack.config.js

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

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

对比

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。

在这里插入图片描述