Webpack多入口页面独立打包的核心是entry设为对象定义各页面JS入口，配合多个HtmlWebpackPlugin实例并精准设置chunks实现“入口→chunk→HTML”映射；需用[name]命名输出文件，关闭自动公共代码提取以保障资源隔离。
Webpack 多入口页面独立打包，核心是让每个入口（如 index.html、admin.html）拥有自己独立的 JS/CSS 资源，互不干扰，且能正确加载对应资源。
配置多个 entry 入口点
在 webpack.config.js 中，entry 不再是单个字符串，而是对象形式，每个 key 对应一个页面的入口 JS 文件：
- key 名会作为 chunk 名，也用于生成 HTML 和输出文件名
- value 是对应的 JS 入口路径，支持数组（如添加 polyfill）
例如：
entry: {
index: './src/pages/index/index.js',
admin: './src/pages/admin/admin.js',
profile: './src/pages/profile/profile.js'
}
为每个入口生成独立 HTML 文件
使用 html-webpack-plugin 实例化多次，每个实例绑定一个 entry：
立即学习“Java免费学习笔记（深入）”；
- 通过
chunks选项指定该 HTML 只引入对应 entry 的资源（避免所有 JS 都被引入） - 用
filename控制输出的 HTML 文件名（如index.html、admin.html） -
template可共用一个模板，也可按需指定不同模板（如不同页面 head 内容）
示例插件配置：
new HtmlWebpackPlugin({
template: './src/pages/index/index.html',
filename: 'index.html',
chunks: ['index'] // 只引入 index.js 及其依赖
}),
new HtmlWebpackPlugin({
template: './src/pages/admin/admin.html',
filename: 'admin.html',
chunks: ['admin']
})
分离公共代码与独立资源
默认情况下，Webpack 会把重复模块抽成 common 或 vendor，但多页应用常需要「按页隔离」——即每页只加载自己用到的代码，避免冗余。
- 关闭自动提取公共模块（
optimization.splitChunks.chunks: 'all'默认开启，可设为'async'或精细控制） - 显式配置
splitChunks.cacheGroups，按入口分组或按路径匹配，例如：index: { test: /[\/]src[\/]pages[\/]index/, name: 'index-vendors', chunks: 'all' } - 启用
runtimeChunk: 'single'可将运行时逻辑单独提取，避免每次构建 hash 变动影响所有入口
输出文件名带上入口名确保隔离
在 output.filename 和 output.chunkFilename 中使用 [name] 占位符：
-
filename: '[name].[contenthash:8].js'→index.a1b2c3d4.js、admin.e5f6g7h8.js -
chunkFilename: '[name].[contenthash:8].js'确保异步 chunk 也按入口区分 - CSS 同理，配合
mini-css-extract-plugin使用filename: '[name].[contenthash:8].css'
这样每个页面的静态资源路径唯一，CDN 缓存和部署更新都更可控。
