Webpack多入口打包需将entry设为对象（如{index:'./src/index.js'}），配合output.filename='[name].js'生成对应JS文件，并为每个HTML配独立HtmlWebpackPlugin实例，通过chunks选项精准控制引入的JS；可用glob动态生成entry和插件；devServer需配置historyApiFallback避免404。
Webpack 配置多入口打包，核心是把 entry 从单个路径改为对象，每个键对应一个页面的 JS 入口，并配合 HtmlWebpackPlugin 实例一一映射 HTML 输出。这不是加几行配置就能跑通的事，关键在于建立“入口 → chunk → HTML”的明确对应关系。
entry 必须是对象，键名决定输出文件名
不能写成数组或字符串，必须是形如 { index: './src/index.js', admin: './src/admin.js' } 的对象。每个 key（比如 index）会成为最终生成 JS 文件的名称——配合 output.filename: '[name].js'，就输出 index.js 和 admin.js。Webpack 会为每个入口单独构建依赖图，但公共模块可被自动提取复用（靠 optimization.splitChunks）。
每个 HTML 页面配一个 HtmlWebpackPlugin 实例
光有多个入口还不够，得让每个 HTML 文件只加载它需要的 JS。这靠 chunks 选项控制：
new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', chunks: ['index'] })new HtmlWebpackPlugin({ filename: 'admin.html', template: 'src/admin.html', chunks: ['admin'] })
如果某个页面既要主逻辑又要独立模块，比如登录页需 main 和 login，就写 chunks: ['main', 'login']——前提是这两个名字都在 entry 或 splitChunks 中定义过。
立即学习“Java免费学习笔记（深入）”；
入口太多时，用 Node 脚本动态生成
手动维护几十个 entry 和插件容易出错。推荐用 glob.sync 扫描目录，再用 reduce 构建 entry 对象：
- 比如扫描
./src/pages/*/index.js，提取出login、dashboard等页面名 - 用
reduce把它们转成{ login: ['./src/pages/login/index.js'], dashboard: ['./src/pages/dashboard/index.js'] } - 同时生成对应数量的
HtmlWebpackPlugin实例
这样新增一个 src/pages/report/index.js，不用改 webpack 配置，重新打包就自动支持。
开发时要让多页面路由能正常访问
在 webpack-dev-server 下，直接访问 /admin.html 可能 404。需要配置 devServer.historyApiFallback：
- 设为
false，避免它把所有非静态资源请求都重定向到index.html - 或者精细配置
rewrites，例如把/admin/请求映射到/admin.html
否则启动后只能打开根路径，点进子页面会白屏或报错。
