3.2.2 entry：Webpack 的入口起点

在 Webpack 的配置中，entry 属性是极其核心的一部分，它定义了 Webpack 应该使用哪个模块作为构建其内部依赖图的开始。简单来说，entry 告诉 Webpack：“从这里开始打包你的应用程序”。理解并正确配置 entry 是高效使用 Webpack 进行项目开发的基础。本章节将深入探讨 entry 的多种配置方式及其应用场景，帮助读者从入门到进阶，掌握 Webpack 的入口配置技巧。

3.2.2.1 单入口配置

最基础的 entry 配置方式是指定一个单一入口点。这适用于简单的单页面应用（SPA），其中所有 JavaScript 代码都从同一个入口文件开始。

module.exports = {
  entry: './src/index.js',
  // 其他配置...
};

在这个例子中，Webpack 会从 ./src/index.js 开始构建依赖图，并包含所有从这个文件直接或间接引用的模块。

3.2.2.2 多入口配置

随着项目复杂度的增加，你可能需要构建多个入口点，比如一个具有多个页面的应用。Webpack 支持通过对象或数组的形式配置多个入口点。

对象语法

使用对象语法，你可以为每个入口点指定一个唯一的名称，这有助于在输出中区分不同的构建产物。

module.exports = {
  entry: {
    main: './src/index.js', // 主页面入口
    vendor: './src/vendor.js' // 第三方库入口，用于代码分割
  },
  // 其他配置...
  output: {
    filename: '[name].bundle.js', // 使用 [name] 占位符来根据入口名称生成文件名
    // 其他输出配置...
  }
};

数组语法

虽然不常用，但你也可以通过数组来指定多个入口文件，Webpack 会将这些文件合并为一个入口点。这种方式主要用于将多个文件合并成一个“启动脚本”，但通常不推荐用于生产环境，因为它限制了代码的分割和懒加载能力。

module.exports = {
  entry: ['./src/polyfills.js', './src/index.js'],
  // 其他配置...
};

3.2.2.3 动态入口配置

在某些情况下，你可能需要根据环境变量或运行时条件动态地设置入口点。虽然 Webpack 配置文件本身是静态的，但你可以通过一些技巧来实现动态入口配置。

一种常见的方法是使用 Node.js 的环境变量或命令行参数来影响构建过程，并在构建脚本中根据这些变量动态生成 Webpack 配置文件。

# 命令行示例
npm run build -- --env.entry=./src/specialEntry.js

然后，在构建脚本中，你可以根据传入的 --env.entry 参数来设置 entry。

// webpack.config.js
const path = require('path');
const entry = process.env.npm_config_env_entry || './src/index.js'; // 默认入口
module.exports = {
  entry: entry,
  // 其他配置...
};

注意：上述示例中的 process.env.npm_config_env_entry 是 Node.js 和 npm 处理命令行参数时自动设置的环境变量，它依赖于你如何在命令行中传递参数。

3.2.2.4 入口配置的高级用法

• 入口依赖的自动发现：虽然 Webpack 本身不直接支持自动发现入口点，但你可以使用像 glob 这样的库来扫描文件系统，动态构建入口对象。这对于具有多个页面且页面结构相似的应用尤其有用。

• 结合 HTML 插件使用：Webpack 的 html-webpack-plugin 可以基于入口配置自动生成 HTML 文件，并自动将生成的 JS 文件注入到这些 HTML 文件中。这使得管理多页面应用的 HTML 模板变得简单高效。

• 代码分割与懒加载：虽然代码分割和懒加载不是直接通过 entry 配置实现的，但了解 entry 如何与这些特性交互对于优化应用加载时间和性能至关重要。通过合理配置入口点和利用 Webpack 的代码分割功能，你可以实现资源的按需加载，提升用户体验。

3.2.2.5 实战案例

假设你正在开发一个包含多个页面的电商网站，每个页面都有自己独特的逻辑和样式。你可以通过以下步骤来配置 Webpack 的 entry：

1. 确定入口点：首先，为每个页面确定一个主入口文件（如 home.js, product.js, cart.js 等）。

2. 配置入口对象：在 Webpack 配置文件中，使用对象语法为每个页面配置一个入口点。

3. 配置输出：确保 output 配置中的 filename 使用了 [name] 占位符，以便为每个入口生成唯一的文件名。

4. 使用 HTML 插件：为每个入口点配置一个 html-webpack-plugin 实例，以自动生成对应的 HTML 文件，并自动引入生成的 JS 和 CSS 文件。

5. 考虑代码分割：对于第三方库或大型模块，考虑使用 Webpack 的 SplitChunksPlugin（或 optimization.splitChunks 配置）进行代码分割，以减少单个文件的大小，提高加载速度。

6. 优化与调试：通过 Webpack 的各种插件和加载器（如 source-map）来优化构建过程和调试体验。

通过以上步骤，你可以有效地管理多页面应用的 Webpack 入口配置，确保项目结构清晰、构建高效、性能优异。