Как получить локальные картинки за пределами проекта?

Question

[Gagatyn]

Здравствуйте!
Директория(условно):

-папка
  |-проект
    |-dist
    |-public
    |-src
      |-main.js
    |-webpack.config.js
  |-картинки
    |-папка_с 1м_набором
    |-папка_с_2м_набором
    |-папка_с_3м_набором
    |-index.js

В main.js импортировал объект(url'лы) с картинки/index.js
В картинки/index.js следующий код:

export default [{
  url: "папка_с_1м_набором/картинка1.png",
},
{
  url: "папка_с_2м_набором/картинка1.png",
},
...]

В консоле GET 404 ошибка, насчет картинок: http;//localhost 3000/папка_с_1м_набором/картинка1 png

Менять директорию это самый последний вариант. Просто проектов не один, а большинство картинок повторяются.
Узнал о

require.context("../../папка_с_1м_набором/картинка1.png", true, /\.png$/)

Но безрезультатно.

Подскажите как их достать?
Как оптимизировать, чтобы брать url или сами картинки с одного файла?

Answer 1

[Aetae]

Эти картинки отсутствуют на сервере, потому что никто их туда не кладёт. Сервер(webpack devserver) работает не от локальной папки, а от структурированного как описано в конфиге результата сборки. Сделайте build и посмотрите в папку dist: именно так и выглядит структура файлов на сервере.

Вы можете положить эту папку с картинками туда использовав copy-webpack-plugin. Если на сервер эта папка будет класться вручную и в прод. dist она вам не нужна - можете подключать этот плагин только для develpment.
Альтернативно вы можете настроить devserver (используя before/after), чтоб он просто отдавал файлы из этой папки по соответствующему запросу(читая их содержимое вручную средствам node fs).
Главное не забыть потом положить эту папку на сервер руками.