基于Webpack HTMLWebpackPlugin的多页构建定制指南-html教程-PHP中文网

不加 chunks 会导致所有入口 js 被注入每个 html 页面，因 html-webpack-plugin 默认注入全部 entry；必须为每个 htmlwebpackplugin 实例显式配置 chunks 数组，且值需与 entry key 完全一致，才能精准控制 js 注入。

基于webpack htmlwebpackplugin的多页构建定制指南

html-webpack-plugin 生成多个 HTML 文件时，不加 chunks 就会把所有入口 JS 全塞进每个页面 —— 这是绝大多数人踩的第一个坑。

为什么每个页面都加载了全部 JS？

默认行为下，html-webpack-plugin 不会区分入口，它只看当前配置里声明了哪些 entry，然后一股脑全注入。比如你有 home、about、admin 三个入口，但只配了一个插件实例且没设 chunks，那生成的 home.html 里也会包含 about.js 和 admin.js 的 <script></script> 标签。

chunks 是显式声明“这个 HTML 只该加载哪些 chunk”的唯一可靠方式
不写 chunks ≠ 加载当前入口对应的 chunk，而是加载全部已定义的 entry chunk
即使你用 filename: "[name].html" 动态命名，也不改变注入逻辑

如何为每个页面精准注入对应 JS？

最稳妥的方式是为每个页面单独声明一个 HtmlWebpackPlugin 实例，并明确指定 chunks 数组：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

plugins: [
  new HtmlWebpackPlugin({
    filename: 'home.html',
    template: 'src/pages/home/index.html',
    chunks: ['home'] // ← 只注入 home.js 及其依赖
  }),
  new HtmlWebpackPlugin({
    filename: 'about.html',
    template: 'src/pages/about/index.html',
    chunks: ['about']
  })
]

chunks 值必须与 entry 对象的 key 完全一致（区分大小写）
如果用了 SplitChunksPlugin 提取公共模块，公共 chunk 名（如 common）也得手动加进 chunks 数组才能注入
模板中若用了这类 EJS 表达式，前提是 chunks: ['home'] 已启用，否则 files.chunks 为空

动态生成多页配置时容易漏掉什么？

用 glob 扫描入口文件自动构建插件数组很省事，但常忽略两个关键点：

扫描路径必须匹配实际 entry 的 key 命名规则 —— 比如 ./src/pages/*/index.js 扫出 home，那 entry 里就得是 home: './src/pages/home/index.js'，不能是 homePage
动态生成的 HtmlWebpackPlugin 实例必须被正确推入 plugins 数组，而不是包裹在另一个数组里（常见错误：plugins: [htmlPlugins] → 应为 plugins: [...htmlPlugins]）
如果某个页面需要额外 CSS 或异步 chunk（比如按需加载的组件），这些 chunk 名不会自动出现在 chunks 列表里，得手动补全