Через какие файлы работают загрузчики webpack?

Нет, он будет включать только то, что требуется вашим сценарием.

<img src={ require('../some/img.png') } /> — это способ сообщить Webpack, что ваш исходный код нуждается в этом образе для запуска.

В рабочей сборке Webpack это будет скомпилировано во что-то вроде <img src="http://yoursite/whatever/89de0f2.png" />. Оператор require() никогда не выполняется, он заменяется действительным кодом Javascript. Этот замененный код и есть то, что помещено в bundle.js.

Затем изображение помещается в любую выходную папку, которую вы укажете (например, в локальную папку dist/), и переименовывается во что-то уникальное, что обычно представляет собой хэш содержимого файла, что приводит к 89de0f2.png. (Это название я придумал для примера, но обычно оно выглядит примерно так).

Теперь, когда вы загружаете этот файл, 89de0f2.png, ваш исходный код будет точно ссылаться на 89de0f2.png, так что эта версия изображения гарантированно будет существовать. Вот как Webpack обеспечивает гарантированную загрузку ассетов.

Wepback поместит img.png в вашу папку dist/ как 89de0f2.png только в том случае, если вам это нужно. Любые другие изображения не будут помещены в эту папку.

Вы также можете спросить о кодировании изображений base64 и их размещении непосредственно в файле bundle.js. В этом случае в dist/ не помещается изображение, но отвечают все остальные правила. Вызов require() по-прежнему заменяется действительным Javascript.

Есть один случай, когда для Webpack потребуется несколько ресурсов. Вы можете потребовать шаблоны, например <img src={ require.context( './images', true, /\.png/ ) } />, и Webpack соберет все png-файлы в этом каталоге в папку dist/. См. этот вопрос Stackoverflow для получения дополнительной информации.