入口点 | Entry Points

入口起点 （Entry Points）

正如入门所述，有多种方法可以entry在webpack配置中定义属性。除了解释为什么它可能对您有用之外，我们将向您展示您可以配置该entry属性的方式。

单入口（简写）语法

用法： entry: string|Array<string>

webpack.config.js

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

module.exports = config;

该entry属性的单个条目语法是一个简写：

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

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

对象语法

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

webpack.config.js

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

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

实现场景

以下是一些入口配置及其实际使用案例：

webpack.config.js

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

为什么？

为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

多页面应用程序

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

作为一个经验法则：对于每个HTML文档只使用一个入口点。