HTML打包构建：配置Rollup实现多HTML模版资源合并的方法-html教程-PHP中文网

rollup 通过 @rollup/plugin-html 插件让 index.html 参与打包：插件读取 template（完整 html 文件，路径相对于项目根目录），自动在底部注入生成的 js 脚本标签，并输出独立 html 文件；input 仍必须指向 js 入口（如 src/main.js），html 是附属资源而非模块入口。

html打包构建：配置rollup实现多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 文件（含结构），路径相对于当前工作目录（通常是项目根目录），不是 rollup.config.js 所在位置
插件自动在底部插入 <script src="xxx.js"></script>，也可通过 inject: 'head' 改到
若需多页，不能靠多个 html() 实例——每个实例只输出一个文件；得配合 output.manualChunks 或用 input 对象指定多个 JS 入口，再在模板里用变量区分逻辑

多个 HTML 模板怎么分别打包输出？

Rollup 原生不支持多 HTML 输入，但可通过配置多个 input + 多个 output 配合插件实现，关键在于每个 html() 插件实例绑定唯一 fileName 和对应 JS 入口。

html-deploy

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

下载

在 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 语法——得提前用 Node 脚本拼接好模板，或换 Pug + @rolldown/plugin-pug
Webpack 可通过 html-loader 把 HTML 当字符串模块导入 JS，Rollup 没等效 loader，import html from './tpl.html' 会失败
Rollup 构建产物更轻量，但 HTML 相关能力弱于 Webpack 生态；若项目重度依赖多页模板+动态注入，优先考虑 Webpack 或 Rolldown

真正难的不是配插件，而是理清 HTML 在构建链路里的角色：它既不是代码，也不是静态资源，而是“带逻辑的容器”。路径怎么映射、脚本何时注入、多页如何隔离——每一步都得对齐最终部署结构，而不是只让本地能跑通。