1. Webpack 入口（entry）到底有什么用？
1.1 入口的定义与核心作用
在 Webpack 的打包流程中，入口（entry）是用来指明应用的起始模块的。Webpack 会从入口开始构建一个有向无环图（依赖图），把入口及其依赖的模块全部打包成一个或多个 bundle。通过 入口点，打包产物能正确引入所需的 JS、CSS、图片等资源。
理解入口的核心作用有助于优化加载策略：单入口时生成一个 bundle，多入口会生成多个 bundle，从而实现并行加载与按需加载。
1.2 入口的工作原理：依赖图与输出
当 Webpack 启动打包时，它会从 entry 配置中指定的模块开始，递归解析所有被引用的模块，形成一个依赖图。最终，各个入口点会对应输出的 bundle，例如 main.bundle.js、admin.bundle.js。
为了提升缓存命中率和加载性能，可以结合 输出文件名模板 [name]、[contenthash]，明确区分不同入口的产物。下面是一个基本示例：
// webpack.config.js
const path = require('path');module.exports = {entry: {main: './src/index.js',admin: './src/admin.js'},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}
};1.3 入口的常见误区与要点
不少新手将入口仅理解为一个文件的路径，实际 入口还决定了代码的初始加载点和后续的依赖分布。需要注意的是，没有入口就无法打包；同一个入口相同导出的代码会被抽取到相应的 bundle。
如果只指定了一个入口，但希望在某些路由切换时懒加载，则需要结合 代码分割和分块策略来实现。
2. 常见使用场景
2.1 单入口应用场景
在传统的单页应用（SPA）中，通常只有一个入口点，例如 main.js。此场景的核心是把应用的入口放在一个文件，后续通过路由实现页面切换。单入口场景简单、构建速度快，但可能在后续合并时无法达到并行加载和缓存的最佳效果。
下面是一个典型的单入口配置，适合一个简单的前端应用：输出统一 bundle，静态资源与入口紧密耦合。
2.2 多入口场景
多入口适用于对不同页面或子应用需要独立打包的场景，例如企业应用中的仪表盘、CRM、帮助中心等。通过在 webpack.config.js 中配置 entry: { pageA: 'src/pageA.js', pageB: 'src/pageB.js' }，可以生成多个 bundle。并行加载和缓存独立性提升加载速度。
在多入口场景下，通常还要配置 output.filename = '[name].bundle.js'，以确保不同入口的产物不冲突。接下来是一个多入口的基础配置：
2.3 动态入口与按需加载
当应用规模增大时，动态确定入口点变得有必要。可以通过 glob（模式匹配）或自定义逻辑在 webpack 配置阶段生成入口对象。这样不仅能实现按路由加载，还能通过相应的 splitChunks 做好代码分割。
示例中，使用 glob 动态生成入口的做法如下，通过读取匹配的文件来构建入口对象：自动发现页面入口，减少手动维护入口的工作量。
2.4 库打包与应用打包的入口差异
当你需要把某些第三方库打包成独立的 bundle，以便在多个页面复用时，可以将库单独作为一个入口，例如 vendor.js。库入口与应用入口分离有助于缓存，降低对返回用户的网络开销。
配置示例中，entry 可以包含一个库入口，同时保持应用入口不变。随后在 splitChunks、runtimeChunk 的策略下实现最优缓存策略。
3. 实战要点
3.1 多入口的输出与缓存策略
要点之一是对 输出配置 的规划，使用 filename: '[name].[contenthash].js'、并开启 chunkhash，以实现长期缓存命中。
在实际项目中，结合 optimization.splitChunks，把公共代码抽离成 vendor 或 common-chunk，提高重复引用的缓存命中率，同时确保入口更新时不会导致所有 bundle 重新下载。
3.2 代码分割与懒加载实践
代码分割是实现按需加载的关键，entry 负责入口，splitChunks 负责公共代码分割。通过动态 import()，在需要时进行懒加载，显著降低初始加载体积。
下面的代码演示了利用 import() 做懒加载的例子，以及如何通过 webpack 将其打包成独立的 chunk：
// src/index.js
function init() {import('./heavy.js').then(function(module){module.load();}).catch(function(err){console.error('动态加载失败', err);});
}
init();3.3 运行时加载策略与缓存更新
通过配置 runtimeChunk: 'single'，可以将运行时代码单独抽离，便于长期缓存。利用内容变化时文件名随之变化的策略，可以实现无缝更新而不必强制清除缓存。
实战中，通常会结合 contenthash 与服务器端的缓存策略配置，确保文件名随内容变化而变化，从而实现无缝升级。
3.4 常见问题与调试要点
在实际调试中，关注以下点：入口是否被正确解析、输出 bundle 是否按名称分布、是否有重复依赖被错误打包、以及构建时间的变化。通过分析 Stats & Profile，可以定位打包瓶颈。
以下是一个常见的调试配置片段，用于快速查看构建统计信息：开启详细统计。
// webpack.config.js
module.exports = {// ...stats: 'normal'
};