HTML怎么用Rollup打包_html Rollup打包构建使用方法【完整版】-html教程-PHP中文网

rollup 本身不直接打包 html 文件，它默认忽略 .html 文件，需借助 @rollup/plugin-html 等插件将 html 作为资源参与构建，实现脚本注入、路径替换和输出复制等功能。

html怎么用rollup打包_html rollup打包构建使用方法【完整版】

Rollup 本身不直接打包 HTML 文件

Rollup 是一个 JavaScript 模块打包器，它的核心职责是处理 import/export 语句、树摇（tree-shaking）、生成 ES/CJS/UMD 等格式的 JS 输出。它**默认完全忽略 .html 文件**——你直接把 index.html 放进 input 配置里，Rollup 会报错或静默跳过。

所以「用 Rollup 打包 HTML」的真实含义，其实是：在 JS 构建流程中，把 HTML 当作资源参与构建（如注入 script 标签、替换占位符、复制到输出目录）。这需要插件协同完成。

必须用插件：@rollup/plugin-html 或 rollup-plugin-html

目前主流选择是 @rollup/plugin-html（官方维护，v2+ 推荐），它提供 html() 插件函数，支持：

读取 HTML 模板（如 src/index.html）
自动注入生成的 JS bundle 路径（<script src="bundle.js"></script>）
支持 <link rel="modulepreload"> 注入
可配置 title、meta、自定义 inject 逻辑

安装与基础用法：

npm install --save-dev @rollup/plugin-html

在 rollup.config.js 中启用：

import { html } from '@rollup/plugin-html';

export default {
  input: 'src/main.js',
  plugins: [
    html({
      template: 'src/index.html', // 必须存在，否则报错
      fileName: 'index.html'      // 输出名，默认 'index.html'
    })
  ],
  output: {
    dir: 'dist',
    format: 'es'
  }
};

注意：template 路径是相对于当前工作目录（通常是项目根目录），不是相对于配置文件路径。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

HTML 中 script 标签必须留空或用占位符

@rollup/plugin-html 默认会查找 <script type="module"></script> 或 <script></script> 标签，并用生成的 bundle 替换其内容或 src 属性。但它**不会自动添加 <script></script> 标签**——你得在模板里先写好空标签或占位结构：

✅ 正确（推荐）：<script type="module" src="./dummy.js"></script> → 插件会把 src 替换为实际 bundle 名（如 main.abc123.js）
✅ 可行：<script type="module"></script> → 插件会在其中注入内联代码（不推荐，破坏缓存）
❌ 错误：<script></script> 且无 type="module" → 默认不识别，需手动配置 inject

如果要用 hash 文件名（如 main.a1b2c3.js），确保 output.entryFileNames 和 output.chunkFileNames 已配置，否则插件无法正确推导 URL。

常见报错和绕过方式

典型错误信息：Error: Could not resolve entry module 或 PluginError: html: No <script> tag found</script>，多由以下原因导致：

template 路径错误或文件不存在 → 检查路径是否拼写正确，是否用了 path.resolve() 处理相对路径
HTML 模板里没写任何 <script></script> 标签 → 至少加一个空的 <script type="module"></script>
Rollup 输入是 HTML（如 input: 'src/index.html'）→ 这会导致解析失败，input 必须指向 JS 入口
使用了 dynamicImport 但未启用 experimentalDynamicImport: true（旧版 Rollup）→ 现代版本已默认支持，无需额外配置