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

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

0 голосов
/ 13 января 2019

У меня есть проект 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, который должен работать веб-пакет.

1 Ответ

0 голосов
/ 13 января 2019

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

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

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