Как настроить относительные пути в Webpack?

Question

[John Johnson]

Всем привет . Подскажите пожалуйста , поднял проект через create react app и такая проблема :
Вставил тег video указал относительный путь в видеофайлу в атрибуте src, но он не срабатывает. после некоторого времени обнаружил что вебпак изменяет путь
То есть
путь import video from '../../img/video/mainstream.mp4'
он видит как Video /static/media/mainstream.bbae5fec.mp4

Как разрешить такую проблему ?

Comments

[Михаил]

source[src] не имеет никакого отношения к import video
если это статика, так положите её в статику

[John Johnson]

Михаил, проблема в том что когда я указывают путь к файлу , то он его не видит.
То есть то есть смотрите в одной папке лежит компонент и css файл.Указываю через css тот же самый путь , картинка видна, а если в src в компоненте, то нет.

Тольок через импорт получилось вывести

[Михаил]

John Johnson,
source src={video}

[John Johnson]

Михаил, так я же на скрине как раз закоментил этот вариант. Я бы хотел не через импорты пути вставлять а по обычному.

[Михаил]

John Johnson, ну так не пихайте статику в исходники
В src должна быть ссылка на публичный файл, который доступен напрямую по ссылке после сборки

Answer 1

[Антон Спирин]

после некоторого времени обнаружил что вебпак изменяет путь
То есть
путь import video from '../../img/video/mainstream.mp4'
он видит как Video /static/media/mainstream.bbae5fec.mp4

Все правильно. Путь меняет соответствующий loader. Если вы загляните в папку с проектом, то можете обнаружить там директорию build. В нее лоадер и копирует ваше видео. Папку build вам и надо хостить статическим сервером.

Deployment

Что касается определения пути к файлу в атрибуте тега, то с webpack это делается так:

<video src={require('../../img/video/mainstream.mp4')} />

Comments

[Андрей Костяев]

Ещё стоит сюда добавить, что при использовании CRA, можно создать файл.env (возможно он сразу есть, не помню точно) и там указать переменную NODE_SRC, эта переменная отвечает за то откуда начинается import

Answer 2

[Andrey Suha]

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