Rollup.js 捆绑图片

Question

在 webpack 世界中，我可以使用 file-loader

按以下方式将图像作为 url 进行捆绑和访问

像这样：

const webpackConfig = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg)$/,
        use: [
          {loader: 'file-loader?name=[path][name].[hash].[ext]'}
        ],
        include: paths
      }
    ]
  }
}

并在 React 组件上像这样使用它，例如：

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

function ReactFunctionalComponent () {
  return (<img src={foo} />)
}

这会将 foo 与图像的路径放在一起

有没有办法在 rollup js 上做同样的事情，这样我就可以将图像资产作为 URL 并在捆绑包中使用散列？

Answer 1

您可以使用插件向汇总添加功能。在这种情况下使用 rollup-plugin-image (https://github.com/rollup/rollup-plugin-image) or rollup-plugin-img (https://github.com/alwaysonlinetxm/rollup-plugin-img) 似乎更灵活。

考虑到此技术会增加文件的大小。

Rollup.js 捆绑图片

Rollup.js bundling images

reactjs

webpack

rollupjs