webpack 多页面应用自动化配置核心是用 node.js 脚本扫描 src/pages/*/index.js 生成 entry 和 htmlwebpackplugin 实例，统一目录结构便于提取页面名，配合 devserver.rewrites 解决子页面 404。

Webpack 在多页面应用（MPA）中实现自动化配置，核心是用 Node.js 脚本动态扫描页面目录、生成 entry 对象和 HtmlWebpackPlugin 实例，避免手动维护大量重复配置。

统一页面目录结构

把每个页面放在 src/pages/xxx/index.js 和 src/pages/xxx/index.html 下，例如：

• src/pages/home/index.js
• src/pages/login/index.js
• src/pages/admin/index.js

这样路径有规律，便于脚本自动识别页面名（如 home、login、admin）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 glob 扫描入口文件并构建 entry

在 webpack.config.js 中引入 glob，读取所有 src/pages/*/index.js：

• 用 glob.sync('./src/pages/*/index.js') 获取路径数组
• 对每个路径提取文件夹名，比如 ./src/pages/login/index.js → login
• 用 reduce 构建 entry 对象：{ login: './src/pages/login/index.js', admin: './src/pages/admin/index.js' }

同步生成 HtmlWebpackPlugin 实例

遍历上一步得到的页面名列表，为每个页面创建一个 HtmlWebpackPlugin：

• filename 设为 ${page}/index.html 或 ${page}.html，按需选择输出结构
• template 指向对应 src/pages/${page}/index.html
• chunks 固定填 [page]，确保只加载该页面的入口 JS

开发时支持直接访问子页面

webpack-dev-server 默认会把所有请求重定向到 index.html，导致 /login.html 访问 404。解决方法是：

• 设 devServer.historyApiFallback: false，关闭默认行为
• 或使用 devServer.rewrites 精准映射，例如把 ^\/login\/.*$ 指向 /login.html

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南