webpack 多入口打包需配置 entry 对象、splitchunks 提取公共模块、每个 html 对应 htmlwebpackplugin 并精准指定 chunks，动态生成配置可提升可维护性，devserver 需合理设置 historyapifallback 或 rewrites 以支持多页直接访问。
Webpack 配置多入口打包，本质是让每个页面拥有独立的构建入口和 HTML 输出，同时借助代码分割减少冗余、提升缓存效率。关键不在堆配置，而在理清“入口 → chunk → HTML”的映射关系。
entry 必须设为对象，每个键名决定输出文件名
不能用字符串或数组，必须写成键值对形式：
-
正确写法：
entry: { index: './src/index.js', admin: './src/admin.js', login: './src/pages/login/index.js' } -
输出效果：配合
output.filename: '[name].[contenthash:8].js'，生成index.abc123.js、admin.def456.js等独立文件 -
注意：每个入口会生成独立依赖图，但公共模块（如 React、lodash）可被自动提取复用——靠
optimization.splitChunks
每个 HTML 页面配一个 HtmlWebpackPlugin 实例，并用 chunks 精准控制引入哪些 JS
光有多个入口，不指定 HTML 加载哪几个 chunk，就会全量引入或漏引。
-
一一对应示例：
new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', chunks: ['index'] })new HtmlWebpackPlugin({ filename: 'admin.html', template: 'src/admin.html', chunks: ['admin'] }) -
混合引入也支持：比如登录页需要主逻辑 + 验证模块，且二者都已定义为 entry 或 splitChunks 中的 chunk 名，就写
chunks: ['login', 'auth'] - 避免错误：chunks 数组里的名字必须和 entry 的 key 或 splitChunks 提取的 chunk 名完全一致，大小写敏感
入口太多时，用 Node 脚本动态生成 entry 和插件
硬编码几十个页面的 entry 和 HtmlWebpackPlugin 容易遗漏、难维护。
- 用
glob.sync('./src/pages/*/index.js')扫描所有页面入口文件 - 从路径提取页面名，例如
./src/pages/dashboard/index.js→dashboard - 用
reduce构建entry对象，再遍历生成对应数量的HtmlWebpackPlugin实例 - 新增页面只需在
src/pages/xxx/index.js写好代码，无需改 webpack 配置，重新打包即生效
开发阶段要支持多页面直接访问，别让 devServer 拦截路由
启动 webpack-dev-server 后，若直接访问 /admin.html 或 /user/profile 报 404，大概率是 historyApiFallback 配置不当。
-
推荐做法：设
devServer.historyApiFallback: false，关闭默认重定向行为 -
更精细控制：用
rewrites映射特定路径，例如把/admin/**请求转发到/admin.html -
验证方式：启动后能直接打开
http://localhost:8080/admin.html或http://localhost:8080/user/profile，各自加载对应 JS，不白屏、不报错
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
