本文介绍在 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（自动注入 和 ）
- 2.html（仅注入 ）
该方案零侵入原有 HTML 结构，不依赖运行时加载器，兼顾构建期可控性与部署简洁性，是 Webpack 多页应用（MPA）的标准实践。
立即学习“前端免费学习笔记（深入）”；