Включая ресурсы изображений, на которые ссылается JSX в Webpack

#reactjs #webpack

Вопрос:

Возможно ли, чтобы Webpack включал ресурсы изображений в комплект сборки без:

Использование инструкции импорта для этого конкретного ресурса (что можно сделать с помощью модулей ресурсов в Webpack 5)
Не записывая его в статический HTML-документ в качестве атрибута src (что можно сделать с помощью HtmlWebpackPlugin)

У меня был бы некоторый код React JSX, который ссылался бы на ресурсы изображений либо в качестве src атрибута в <img> элементе, либо, скажем , имел бы некоторую строку ресурсов var imgUrl = './Assets/img.svg' , а какой-то элемент позже использовал бы эту строку в качестве атрибута.

В настоящее время я мог бы вручную скопировать всю /Assets папку /dist , но у меня были бы неиспользуемые ресурсы, /Assets и я хотел бы, чтобы Webpack выяснил, какие из них фактически используются.

Ответ №1:

О, теперь я понимаю, и, к сожалению, это невозможно. React не будет определять значение src изображения , потому что оно будет рассматривать его просто string как, а не как путь. Он не поймет, о каком файле вы говорите. Единственный способ использовать его так, как вы хотите, — это поместить эти изображения в public папку, которую вы сказали, что не хотите делать.

По моему личному мнению, то, что я обычно делаю со статическими изображениями, если приложение небольшое, — это собираю их все вместе в файл, импортируя их и экспортируя объект со всеми ними вместе. Наконец, каждый раз, когда я хочу использовать какое-либо изображение, я просто импортирую этот файл и использую то изображение, которое мне нужно. При таком подходе в конце дня я получу только один файл (пакет). Это просто подход, есть много разных способов сделать это, но это зависит от конкретного случая

1. Спасибо, я подумал, что для Webpack / любого плагина может быть непросто проанализировать все строки и определить расширения файлов изображений. Ситуация, в которой я оказался, заключается в том, что я загрузил пакет значков, но я не использую все значки, поэтому не хотел связывать неиспользуемые ресурсы. Похоже, мне просто нужно будет зарегистрировать, какие из них я собираюсь где-то использовать. Спасибо за совет!

Ответ №2:

Я не знаю, правильно ли я понял, но, возможно, вам может потребоваться встроенный актив, как это…

 <img src={require('./Assets/img.svg')} />

Если это не то, что вы ищете, может быть, вы сможете объяснить мне более подробно… У меня довольно большой опыт игры с webpack, думаю, у меня может быть решение для вас