Rollup.js связывание изображений

Question

В мире webpack я могу связывать и получать доступ к изображениям в виде URL следующим образом, используя file-loader

Вот так:

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

И использовать его так на компоненте реакции, например:

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

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

Это поместило бы foo с путем изображения

Есть ли способ сделать то же самое на накопительном js, чтобы я мог иметь актив изображения в качестве URL-адреса с хешем внутри пакета?

Answer 1

Вы можете добавить функциональность в накопительный пакет с помощью плагинов.В этом случае используйте rollup-plugin-image (https://github.com/rollup/rollup-plugin-image) или rollup-plugin-img (https://github.com/alwaysonlinetxm/rollup-plugin-img), что кажется более гибким.

Примите во внимание, что этот метод может увеличить размер файла.