Webpack импортирует файлы динамически во время сборки

Question

У меня есть проект webpack + машинопись, который имеет около 1000 изображений. У меня также есть файл, который описывает эти изображения следующим образом:

[{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: './pathToA.jpg'
}]

Тот же код для B,C,D и других 997 изображений, которые я получил. В конце дня на стороне клиента, который должен сгенерировать HTML ниже:

<img src="/static/pathToA.jpg" alt="imageAAlt"/>

И я также использую imageACode заменить некоторый HTML-код для этого изображения (что угодно).

Хорошо, самый простой способ сделать это:

import a from "../assets/images/pathToA.jpg"

{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: a
}

Есть ли более элегантный способ, подобный так:

{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: import '../assets/images/pathToA.jpg'
}

Или, возможно, какой-то forEach, который должен работать веб-пакет.

Answer 1

Если у вас много ресурсов, и вы не хотите импортировать их вручную, вы можете использовать require.context,

Это простой пример, который может работать в вашем случае:

const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
    code: 'code',
    alt: 'alt',
    source
})