Rollup 通过 @rollup/plugin-html 插件让 index.html 参与打包：插件读取 template（完整 HTML 文件，路径相对于项目根目录），自动在 <body> 底部注入生成的 JS 脚本标签，并输出独立 HTML 文件；input 仍必须指向 JS 入口（如 src/main.js），HTML 是附属资源而非模块入口。
Rolllup 本身不处理 HTML 文件，直接配置 input 为 index.html 会静默跳过或报错——必须用插件把 HTML 当作资源参与构建流程，核心是注入脚本、替换路径、输出复制。
Rollup 怎么让 index.html 参与打包？
靠 @rollup/plugin-html 插件实现，它不编译 HTML，而是读取模板、注入生成的 JS 路径、输出独立 HTML 文件。Rollup 的 input 仍必须指向 JS 入口（如 src/main.js），HTML 是“附属资源”，不是模块入口。
-
template必须存在且是完整 HTML 文件（含<html>结构），路径相对于当前工作目录（通常是项目根目录），不是rollup.config.js所在位置 - 插件自动在
<body>底部插入<script src="xxx.js"></script>，也可通过inject: 'head'改到<head> - 若需多页，不能靠多个
html()实例——每个实例只输出一个文件；得配合output.manualChunks或用input对象指定多个 JS 入口，再在模板里用变量区分逻辑
多个 HTML 模板怎么分别打包输出？
Rollup 原生不支持多 HTML 输入，但可通过配置多个 input + 多个 output 配合插件实现，关键在于每个 html() 插件实例绑定唯一 fileName 和对应 JS 入口。
- 在
rollup.config.js中用对象写法定义多个入口：input: { main: 'src/main.js', about: 'src/about.js' } - 每个
html()插件需独立调用，并传入不同template和fileName：html({ template: 'src/about.html', fileName: 'about.html' }) - 注意：多个
html()实例共用同一构建上下文，title、meta等配置需按需隔离，否则后一个会覆盖前一个 - 输出目录必须统一设为
output.dir，不能设file，否则会冲突
@rollup/plugin-html 常见错误和坑
插件看似简单，但路径、编码、注入时机稍有偏差就会导致页面白屏或脚本 404。
立即学习“前端免费学习笔记（深入）”；
-
template文件缺失时插件不报错，只输出空 HTML——检查终端是否有Could not load template类警告（部分版本静默） - 模板里用了相对路径的
<img src="./logo.png">，插件默认不重写，构建后图片 404——得额外配@rollup/plugin-url或手动改路径为 public 目录下绝对路径 - 开发时用
rollup -c -w启动监听，但修改index.html模板不会触发重新构建——插件未将 template 设为 watch 依赖，需手动重启或加watch: { include: 'src/**/*.html' } - 如果 JS 输出名用了 hash（如
bundle.[hash].js），插件默认注入的仍是bundle.js——必须显式配fileName且和output.entryFileNames规则一致，否则 script 标签引用错误
Rollup 打包 HTML 和 Webpack 的关键区别
Webpack 的 html-webpack-plugin 把 HTML 当模块，支持 require('./header.html') 式引入；Rollup 的 @rollup/plugin-html 是纯资源处理，没有模块化能力，也不解析 HTML 内部的 import 或 include。
- 想在 HTML 里复用片段（如 header/footer），Rollup 不支持
<!--#include-->或include语法——得提前用 Node 脚本拼接好模板，或换 Pug +@rolldown/plugin-pug - Webpack 可通过
html-loader把 HTML 当字符串模块导入 JS，Rollup 没等效 loader，import html from './tpl.html'会失败 - Rollup 构建产物更轻量，但 HTML 相关能力弱于 Webpack 生态；若项目重度依赖多页模板+动态注入，优先考虑 Webpack 或 Rolldown
真正难的不是配插件，而是理清 HTML 在构建链路里的角色：它既不是代码，也不是静态资源，而是“带逻辑的容器”。路径怎么映射、脚本何时注入、多页如何隔离——每一步都得对齐最终部署结构，而不是只让本地能跑通。
