如何在Rollup.js中实现类似Webpack file-loader的图片URL哈希打包功能？

当然可以！Rollup生态里有专门的插件能实现和Webpack中file-loader完全一致的效果——把图片资源打包成带哈希的独立文件，同时在代码里返回对应的访问URL。最常用也最靠谱的就是@rollup/plugin-url，下面一步步给你讲怎么配置和使用：

打开终端，用包管理器安装开发依赖：

npm install @rollup/plugin-url --save-dev
# 或者用yarn
yarn add @rollup/plugin-url --dev

在你的Rollup配置文件（通常是rollup.config.js）里引入并配置这个插件：

import url from '@rollup/plugin-url';
import { resolve } from 'path';

export default {
  input: 'src/index.js', // 你的项目入口文件路径
  output: {
    dir: 'dist', // 打包输出目录
    format: 'es' // 根据项目需求选合适的格式，比如cjs、umd等
  },
  plugins: [
    url({
      // 配置打包后图片的文件名格式，包含路径、原文件名、哈希和扩展名
      fileName: '[dirname][name].[hash][extname]',
      // 指定要处理的图片格式，和你Webpack里的规则保持一致
      include: ['**/*.jpg', '**/*.png', '**/*.svg'],
      // 设置为false强制所有图片都输出为独立文件；如果设为数值，小于该大小的图片会转成base64嵌入代码
      limit: false,
      // 可选：如果想把图片统一放到某个子目录，比如dist/assets/images，可以修改配置为
      // fileName: 'assets/images/[name].[hash][extname]'
    })
  ]
};

和Webpack里的用法几乎一模一样！直接import图片，然后把它作为img标签的src属性值即可：

import foo from '../assets/images/foo.png';

function ReactFunctionalComponent() {
  return <img src={foo} alt="示例图片" />;
}

export default ReactFunctionalComponent;

此时foo会被自动替换成打包后带哈希的图片访问路径，比如assets/images/foo.abc123.png（具体路径取决于你的配置）。

另外，如果需要更定制化的处理（比如压缩图片体积），还可以搭配rollup-plugin-imagemin这类插件一起使用，进一步优化打包结果。

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