请说明通过 Webpack 分别构建单页应用（SPA）与多页应用（MPA）时，在入口配置、输出配置以及公共代码提取方面各自应如何进行设置？
考察说明
考查对 Webpack 配置中入口、输出及代码拆分机制的理解，以及 SPA 与 MPA 在工程实践中的差异。
回答思路
- 【回答框架 1】单页应用在 Webpack 中通常配置单个入口，例如将 main.js 作为入口，输出为单个 bundle 文件，并使用 HtmlWebpackPlugin 生成承载该入口的 HTML 页面。因所有页面共享同一 bundle，代码分割可按路由或第三方库拆分，并结合 optimization.splitChunks 提取公共模块。
- 【回答框架 2】多页应用需要配置多个入口，每个入口对应一个独立 HTML 页面，例如 entry 对象中分别指定 home.js 和 about.js，输出时通过 output.filename 使用 [name] 占位符生成各自 bundle，并为每个页面单独配置 HtmlWebpackPlugin，同时通过 optimization.splitChunks 将页面间公共依赖提取到公共 chunk，减少重复加载。
- 【回答框架 3】在公共代码提取上，两者都可使用 splitChunks 的 cacheGroups，但 MPA 更关注跨页面共享的 vendor 或公共模块；SPA 则常按路由懒加载拆分，并以 chunk 粒度加载。此外，需注意 HtmlWebpackPlugin 的 chunks 配置，确保每个页面只加载自己的入口及需要的公共 chunk。
- 【回答框架 4】配置 MPA 时还需处理页面间的独立样式与资源，例如分别引入各自的 CSS，并确保 output 的 publicPath 正确，避免资源路径错误。整体上，SPA 强调单一运行时与按需加载，MPA 强调多页面独立与公共复用，两者的核心差异体现在入口数量和 HTML 生成方式。
- 【关键点 1】SPA 使用单入口，MPA 使用多入口，通过 entry 对象映射各页面。
- 【关键点 2】输出文件名使用 [name] 占位符区分多页面 bundle。
- 【关键点 3】使用 HtmlWebpackPlugin 为每个页面生成 HTML，并通过 chunks 精确控制包含的脚本。
- 【关键点 4】使用 splitChunks 提取公共依赖，MPA 重点提取跨页面公共模块。
- 【关键点 5】SPA 常配合路由懒加载实现按需加载，MPA 则需保证每个页面独立可访问。
- 【易错点 1】MPA 配置中遗漏 HtmlWebpackPlugin 的 chunks 参数，导致页面加载所有入口 bundle，引起多余请求。
- 【易错点 2】splitChunks 配置不当，将大量公共代码打入每个页面，导致重复下载。
- 【易错点 3】未正确设置 publicPath，导致按需加载的 chunk 路径错误，页面白屏。