在 Webpack 中，Entry（入口） 是配置中最核心的概念之一。

以下是关于 Entry 的详细解释以及单入口与多入口配置的区别：

一、什么是 Entry（入口）？

Entry 是 Webpack 构建内部依赖图（Dependency Graph）的起点。

当 Webpack 处理应用程序时，它会从指定的 Entry 文件开始，递归地找出该文件直接或间接依赖的所有模块（JS、CSS、图片等），然后将这些模块打包成一个或多个 Bundle（最终输出的文件）。

• 默认值：如果不配置，Webpack 4+ 默认的入口起点是 ./src/index.js。
• 生活比喻：Entry 就像是一棵树的“树根”，Webpack 从树根开始向下查找所有的“树枝”和“树叶”（依赖模块），最后把整棵树打包带走。

二、单入口与多入口配置的区别

两者的核心区别在于：语法形式不同、生成的资源文件数量不同、适用场景不同。

1. 单入口配置（Single Entry）

单入口通常用于 SPA（单页面应用，如 React/Vue 项目）。整个应用只有一个主 HTML 页面，所有的逻辑都通过一个主 JS 文件引入。

• 语法：值可以是一个字符串或数组。
• 输出：默认只生成一个主要的 Bundle（除非使用了代码分割 Code Splitting）。

代码示例：

// webpack.config.js
module.exports = {
  // 1. 字符串形式（最常见）
  entry: './src/main.js',
  
  // 2. 数组形式：将多个文件预先合并打包到同一个 chunk 中
  // entry: ['./src/main.js', './src/utils.js'],

  output: {
    filename: 'bundle.js', // 输出固定的文件名
    path: __dirname + '/dist',
  },
};

2. 多入口配置（Multi-Entry）

多入口通常用于 MPA（多页面应用）。比如一个网站既有“首页 (index)”，又有“关于我们 (about)”，两个页面需要独立的 JS 逻辑。

• 语法：值是一个对象（Object），对象的 key 是 chunk 的名称，value 是入口文件的路径。
• 输出：会生成多个 Bundle。必须在 output.filename 中使用占位符（如 [name]）来动态命名，否则文件名冲突会报错。

代码示例：

// webpack.config.js
module.exports = {
  // 对象形式配置多入口
  entry: {
    pageIndex: './src/pages/index/index.js',
    pageAbout: './src/pages/about/about.js',
  },

  output: {
    // [name] 会被替换为 entry 中的 key（即 pageIndex 和 pageAbout）
    filename: 'js/[name].[contenthash:8].js', 
    path: __dirname + '/dist',
  },
};

构建结果会生成 dist/js/pageIndex.xxx.js 和 dist/js/pageAbout.xxx.js。

三、对比总结表

四、补充：多入口的高级用法 (Webpack 5)

在 Webpack 5 中，多入口配置变得更加强大，可以在 entry 中直接配置依赖共享（防止重复打包）：

module.exports = {
  entry: {
    app: { import: './src/app.js', dependOn: 'shared' },
    admin: { import: './src/admin.js', dependOn: 'shared' },
    shared: 'lodash', // 提取公共库 lodash，避免 app 和 admin 重复打包它
  },
};

总结

• 做 Vue/React 单页应用 时，用单入口（entry: './src/main.js'）。
• 做 多页面官网/传统项目 时，用多入口（entry: { pageA: '...', pageB: '...' }）。