如何控制Rollup生成文件的输出位置？调整HTML输出至dist根目录

问题描述 #

源目录结构：

-- browser/
       client.html
       client.js

当前Rollup执行后生成的文件结构：

-- dist/
       browser/
          client.html
       assets/
          client-7878f.js

期望的输出结构：

-- dist/
       client.html
       assets/
          client-7878f.js

当前使用的Rollup配置片段：

{
   input: 'browser/client.html',
}

解决方案 #

核心是调整Rollup的输出配置，让HTML文件直接输出到dist根目录，同时保留JS资源在assets目录的结构。

步骤1：安装HTML处理插件 #

如果还没安装处理HTML输入的插件，先执行安装命令：

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

步骤2：修改Rollup配置 #

在配置中添加output选项和HTML插件配置，指定HTML文件的输出路径：

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

export default {
  input: 'browser/client.html',
  output: {
    dir: 'dist',
    assetFileNames: 'assets/[name]-[hash][extname]' // 固定JS资源输出到assets目录
  },
  plugins: [
    html({
      fileName: 'client.html' // 让HTML直接输出到dist根目录
    })
  ]
};

说明 #

• output.dir指定打包输出的根目录为dist；
• assetFileNames配置确保JS等资源文件生成到assets目录，并保留哈希命名规则；
• html插件的fileName参数直接指定输出的HTML文件名，省略原有的browser层级，从而让文件生成在dist根目录下。

如果你的项目使用其他HTML处理插件，核心思路都是取消HTML文件输出时的原目录前缀，直接指定输出到dist根目录即可。

内容的提问来源于stack exchange，提问作者TrevTheDev