本文介绍在 webpack 5 中通过多入口配置与 htmlwebpackplugin 实现「一个 html 引入多个 js 包，另一个仅引入主 js 包」的精细化资源控制方案。
在实际项目中，我们常需对资源进行按需加载——并非所有页面都需要全部 JavaScript 逻辑。例如，1.html 需要核心功能（main.js）和特定模块（123.js），而 2.html 仅依赖核心逻辑。Webpack 5 原生支持多入口（multiple entry points），配合 HtmlWebpackPlugin 的 chunks 选项，可精准控制每个 HTML 输出所包含的 JS 资源。
✅ 正确配置步骤
- 定义多个入口：在 entry 中为每个需独立打包的 JS 文件声明命名入口（如 main 和 oneTwoThree）；
- 配置多个 HtmlWebpackPlugin 实例：每个实例对应一个 HTML 文件，并通过 chunks 显式指定其应包含哪些入口生成的 bundle；
- 设置输出命名规则：使用 [name].js 确保输出文件名与入口名一致，便于映射与维护。
以下是完整、可直接运行的 webpack.config.js 示例（需提前安装 html-webpack-plugin）：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production', // 或 'development'
entry: {
main: './main.js',
oneTwoThree: './123.js'
},
plugins: [
// 为 1.html 注入 main.js 和 oneTwoThree.js
new HtmlWebpackPlugin({
filename: '1.html',
template: './1.html', // 推荐显式指定 template，避免空模板
chunks: ['main', 'oneTwoThree']
}),
// 为 2.html 仅注入 main.js
new HtmlWebpackPlugin({
filename: '2.html',
template: './2.html',
chunks: ['main']
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};⚠️ 注意事项：若原始 1.html 和 2.html 是静态文件，请务必设置 template 选项指向它们，否则插件会生成默认空白 HTML； chunks 数组中的名称必须与 entry 对象的键名完全一致（区分大小写）； Webpack 5 默认启用持久化缓存，首次构建后增量编译更快，无需额外配置； 如需进一步优化（如代码分割、懒加载），可在 123.js 中使用动态 import()，但本场景静态多入口已足够简洁高效。
构建后，dist/ 目录将生成：
- main.js、oneTwoThree.js（两个独立 bundle）
- 1.html（自动注入 <script src="main.js"></script> 和 <script src="oneTwoThree.js"></script>）
- 2.html（仅注入 <script src="main.js"></script>）
该方案零侵入原有 HTML 结构，不依赖运行时加载器，兼顾构建期可控性与部署简洁性，是 Webpack 多页应用（MPA）的标准实践。
立即学习“前端免费学习笔记（深入）”；
