Webpack 多入口配置需将 entry 设为对象以定义各页面 JS 入口，配合多个 HtmlWebpackPlugin 实例并精准设置 chunks 实现“入口→chunk→HTML”映射；可借助 Node 脚本动态生成 entry 和插件；开发时需合理配置 devServer historyApiFallback 支持多页路由访问。
Webpack 中配置多入口，核心是把 entry 从单个字符串或路径，改为一个对象，每个键名对应一个独立页面的逻辑起点；配合 HtmlWebpackPlugin 实例化多个 HTML 输出，并通过 chunks 精准控制 JS 资源注入。这不是简单堆配置，而是建立“入口 → chunk → HTML”的映射关系。
entry 配置成对象，明确每个页面的 JS 入口
入口不再写死为 ./src/index.js，而是按页面命名组织：
entry: { index: './src/index.js', admin: './src/admin.js', user: './src/user/profile.js' }- 每个 key（如
index）会成为最终输出 JS 文件的名称（配合output.filename: '[name].js'就生成index.js、admin.js） - Webpack 会为每个入口单独构建依赖图，互不干扰，但共享公共模块（可通过
optimization.splitChunks提取 vendors）
HtmlWebpackPlugin 按页生成 HTML，并指定 chunks
每个 HTML 页面需要一个 HtmlWebpackPlugin 实例，关键在 chunks 数组必须与 entry 的 key 对齐：
new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', chunks: ['index'] })new HtmlWebpackPlugin({ filename: 'admin.html', template: 'src/admin.html', chunks: ['admin'] })-
chunks: ['index', 'common']这种写法也合法——表示该 HTML 同时引入index.js和common.js（前提是common也在entry或splitChunks中定义）
动态生成 entry 和 plugins，避免手动维护
页面一多，硬编码 entry 和一堆 HtmlWebpackPlugin 很容易出错。推荐用 Node.js 脚本自动扫描：
- 用
glob.sync('./src/pages/*/index.js')找到所有页面入口文件 - 从路径提取页面名（如
./src/pages/login/index.js→login） - 遍历生成
entry对象和对应的HtmlWebpackPlugin实例 - 这样新增一个
src/pages/dashboard/index.js，无需改 webpack 配置，重新打包就自动支持
开发调试时也要支持多页面路由访问
在 webpack-dev-server 下，不能只靠 HTML 文件名访问。需确保：
- devServer 的
historyApiFallback设为false（默认可能拦截非根路径请求） - 或配置
historyApiFallback: { rewrites: [ { from: /^\/admin/, to: '/admin.html' }, { from: /^\/user/, to: '/user.html' } ] } - 启动后可直接访问
http://localhost:8080/admin.html或http://localhost:8080/user.html，各自加载对应 JS
