面试题：Webpack 如何配置多入口打包

Question

假设你有一个项目，需要打包多个页面，每个页面都有独立的入口文件。请描述如何使用 Webpack 进行多入口打包的配置，包括 entry、output 等关键部分的设置，并简要说明这样配置的原理。

Answer 1

1. Webpack 多入口打包配置

entry 设置

entry 可以是一个对象，每个键值对代表一个入口文件。例如：

entry: {
  page1: './src/page1/index.js',
  page2: './src/page2/index.js'
}

这里 page1 和 page2 是打包后输出文件的名称（在 output 中会用到），./src/page1/index.js 和 ./src/page2/index.js 分别是两个页面独立的入口文件路径。

output 设置

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js'
}

• path 表示输出目录，这里使用 path.resolve(__dirname, 'dist') 获取项目根目录下的 dist 文件夹作为输出目录。
• filename 是输出文件的名称，[name] 是一个占位符，会被 entry 中定义的键（如 page1、page2）替换，最终生成 page1.bundle.js 和 page2.bundle.js 等文件。

2. 配置原理

• 入口文件：Webpack 从每个入口文件开始，像“爬虫”一样，通过静态分析模块之间的依赖关系，构建出一个依赖图。例如，从 page1 的入口文件 ./src/page1/index.js 开始，Webpack 会找到该文件中 import 或 require 的所有模块，递归地将它们添加到依赖图中。
• 输出：Webpack 根据依赖图，将每个入口及其依赖的模块打包成对应的输出文件。在 output 配置中，[name] 占位符确保每个入口文件及其依赖打包后生成独立的文件，便于管理和加载不同页面所需的资源。这样，每个页面都有其独立的 JavaScript 包，避免了不同页面间代码的相互干扰，同时也可以根据需要单独加载某个页面的资源。