Замена src картинок после билда вебпака

Вопрос-ответ Nodejs
1

Вопрос по вебпаку. Если в директориях src и dist-е пути для картинок будут разными, как при сборке заменить src у тега img? Пробовал html-loader + file-loader на картинки, чет не вышло. html-webpack-plugin функции такой насколько не имеет. Можно писать постбилд какой-нибудь, но я чет сомневаюсь, что эта проблема решается костылями. Или вообще практика такая, что пути в src и dist-e должны быть одинаковы? Просмотрел фигову тучу запросов в гугле, но такое чувство, что ни у кого такой проблемы не существует. На работе мы заносим все в tpl и в путях проставляем переменную с бэка типа, но сборку хочу сделать, чисто для статичных каких-нибудь сайтов, однако руками править ничего не хочется. Кто шарит отпишите плиз в комменты или в личку, или хотя бы направление подскажите, спасибо

2

Привет!
По видимому, тебе могло бы помочь использование переменных среды. Вот один из вариантов. Сначала надо установить пакет dotenv - npm. Создаешь два файла в корне env.development и env.production. В этих файлах указываешь путь (смотри ссылку выше), типа:

  • env.development:
    IMAGE_BASIC_URL=https://dev-mybasic-url.com
  • env.production:
    IMAGE_BASIC_URL=https://prod-mybasic-url.com

А в коде клиентского приложения сделать что-то навроде этого: express - Toggle between multiple .env files like .env.development with node.js - Stack Overflow

То-есть в package.json:

"scripts": {
    "start": "NODE_ENV=development PORT=80 node ./bin/www",
    "start-prod": "NODE_ENV=production PORT=81 node ./bin/www"
}

Задать NODE_ENV=development или NODE_ENV=production непосредственно перед командой запуска скрипта в девелоперском режиме или запуска билда.
Потом в коде эту переменную можно использовать как process.env.NODE_ENV.

И потом уже коде использовать пакет dotenv:

require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` })

Этот код возьмет .env.production или .env.development файл с переменными среды из корня проекта в зависимости от process.env.NODE_ENV заданной в package.json при запуске в dev или build режиме соответсвенно.

В результате если ты используешь в коде выражение process.env.IMAGE_BASIC_URL то для билда и для дев режима это выражение будет иметь соответсвующие значения, которые ты задал в env.development и env.production файлах.

Как-то так…

1 лайк