Rollup本身不处理HTML文件,多页面打包必须依赖插件协同;多个input只生成多个JS bundle,不会自动生成HTML;需为每个页面配置独立的@rollup/plugin-html实例,指定template和fileName,并正确设置publicPath以确保script路径正确。

Rollup 本身不处理 HTML 文件,多页面打包必须靠插件协同,不是加几个 input 路径就能自动产出多个 HTML —— 这是新手最容易卡住的地方。
为什么 rollup.config.js 里写多个 input 不会生成多个 HTML
Rollup 的 input 只接受 JS 入口文件(如 src/page1/main.js),它不会读取或解析 HTML。即使你配了 ['src/page1/main.js', 'src/page2/main.js'],输出的也只是多个 JS bundle,没有 HTML 文件生成,更不会自动注入 script 标签。
-
@rollup/plugin-html每次调用html()插件只处理一个模板,生成一个 HTML 输出 - 每个页面需要独立的
html()实例,且每个实例必须指定自己的template和fileName - 多个
html()插件可以共存,但不能共享同一份配置对象(否则会覆盖)
如何为 page1.html 和 page2.html 分别注入对应 JS
关键在于:每个 HTML 模板要绑定唯一的 JS 入口,并确保插件能识别其依赖关系。不能让两个 html() 都指向同一个 src/index.html,也不能让它们都注入 bundle.js。
- 为每个页面建独立模板:
src/page1/index.html、src/page2/index.html - 每个
html()插件显式传入template和fileName,例如:template: 'src/page1/index.html'+fileName: 'page1.html' - 确保每个模板里有唯一占位或默认结构,比如
<div id="app-page1"></div>,避免 JS 初始化冲突 - Rollup 会根据 JS 入口的
import关系自动关联,不需要在 HTML 里手动写<script>
多页面共用公共脚本时的路径与注入控制
如果 page1 和 page2 都用了 shared/utils.js,而你又启用了 code splitting(比如 manualChunks),Rollup 可能生成 shared-xxx.js。这时 @rollup/plugin-html 默认只注入主 bundle,不会自动加 <script src="shared-xxx.js"></script>。
立即学习“前端免费学习笔记(深入)”;
- 启用
inject: true(默认值)只注入入口 chunk 对应的 JS,不包括manualChunks输出的文件 - 若需注入分包,得手动在模板中预留位置,或用
transform函数动态追加 script 标签 - 注意
publicPath配置:所有注入路径默认相对于 HTML 输出目录,若部署在子路径下(如/admin/),需统一设publicPath: '/admin/' - 不同页面的
publicPath无法差异化设置,只能全局统一,这是插件限制
build 后 HTML 中 script 路径出错的常见原因
最常出现的是 <script src="index.js"> 404,或者路径变成 http://localhost:5000/src/main.js 这种开发时的相对路径错误。
-
template路径必须是真实存在的文件,且相对于当前工作目录(通常是项目根目录),不是rollup.config.js所在路径 - 输出目录
output.dir和html().fileName共同决定 HTML 最终位置,JS 路径是相对于该 HTML 文件的,不是相对于dist/ - 若
output.dir: 'dist'且fileName: 'admin/index.html',则注入的 JS 路径会是../assets/main-xxx.js,不是assets/main-xxx.js - 不要依赖插件自动推断 public URL,生产环境务必显式设
publicPath,哪怕只是'./'
多页面打包真正的复杂点不在配置数量,而在 HTML 模板与 JS 入口的映射关系是否被插件准确捕获——漏掉一个 template 文件,或路径拼错一级,整个页面就白跑一次构建。



















