多入口配置中entry必须为对象形式，如{main:'./src/main.js',admin:'./src/admin.js'}，以生成独立JS文件；HtmlWebpackPlugin需为每个入口配置单独实例并指定chunks；splitChunks需设chunks:'all'才能提取多入口公共代码。
JavaScript 打包工具是把多个 .js 文件（以及 CSS、图片等资源）按依赖关系合并、转换、优化并输出为浏览器可执行文件的构建工具。Webpack 是其中最主流的选择，但它不是唯一选项——Vite、Rollup、esbuild 也常用于不同场景。
Webpack 多入口配置：entry 是对象还是数组？
多入口指一个项目要生成多个独立的 HTML 页面（比如后台管理页 + 用户中心页 + 登录页），每页有自己专属的 JS 入口和资源依赖。此时 entry 必须写成对象形式，不能用数组。
-
entry: ['./src/a.js', './src/b.js']→ 单入口，打包成一个 bundle（所有代码混在一起） -
entry: { main: './src/main.js', admin: './src/admin.js' }→ 多入口，生成main.js和admin.js两个独立文件 - 每个 key（如
main）会成为 chunk 名，在output.filename中可用[name]占位符引用
HTML 自动匹配多入口：HtmlWebpackPlugin 怎么配？
Webpack 默认不生成 HTML。要用 HtmlWebpackPlugin 为每个入口生成对应页面，并自动注入正确的 JS 脚本。关键点是：一个入口对应一个插件实例。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
admin: './src/admin.js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['main'], // 只注入 main.js
template: './src/index.html'
}),
new HtmlWebpackPlugin({
filename: 'admin.html',
chunks: ['admin'], // 只注入 admin.js
template: './src/admin.html'
})
]
};
-
chunks字段必须显式指定，否则默认注入所有入口 JS，导致页面加载冗余脚本 - 如果共用同一份模板（如都用
./src/template.html），可通过templateParameters传参区分环境或标题 - 不配
template时，插件会生成极简 HTML，通常不满足需求
提取公共代码：splitChunks 对多入口有效吗？
有效，而且非常必要。否则 main.js 和 admin.js 都会重复打包 React、Lodash 等三方库，体积翻倍。
立即学习“Java免费学习笔记（深入）”；
- 默认情况下，
splitChunks.chunks: 'async'只处理动态导入（import()），对多入口的初始 chunk 不生效 - 必须设为
'all'才能提取入口间公共模块 - 推荐配置：
splitChunks: { chunks: 'all', name: 'vendors', automaticNameDelimiter: '-' } - 这样会生成
vendors-node_modules_react_index_js.js这类文件，被多个入口 HTML 同时引用
多入口看似只是改个 entry 对象，但真正跑通需要同步调整 HtmlWebpackPlugin 实例、splitChunks 策略、甚至 output.filename 中的 [name] 占位符。漏掉任意一环，要么页面白屏，要么脚本错乱加载——尤其是 chunks 字段不写或写错，是最容易被忽略的硬伤。
