В предыдущих уроках мы видели, как использовать url-loader иfile-loader, которые позволяют webpack объединять / упаковывать изображения, используемые в нашем веб-приложении. Чтобы webpack знал, какие изображения использует наше приложение, мы должны сообщить webpack об этих изображениях как о наших зависимостях, импортировав / потребовав файлы изображений где-нибудь в наших зависимостях javascript, например

import homeIcon from '../images/home.png';

С webpack, позволяющим нам импортировать изображения в виде модулей, в такие фреймворки, как angular или react, которые позволяют использовать шаблоны HTML, двусторонняя привязка переменных или JSX, легко указать src для тега <img> изображения, импортированного в javascript, как мы видели в предыдущем уроке. Однако иногда, если у вас слишком много изображений на странице, или если вы не используете html-шаблоны или привязки js-to-html, то импорт изображений в javasscript может не иметь большого смысла. Вместо этого вы можете указать путь src для <img> прямо в html.

Без инструкций import / require для наших ресурсов изображений в javascript webpack не будет обрабатывать изображения как часть объединения, поскольку не будет рассматривать их как зависимости.

В таких случаях мы можем настроить webpack для копирования всех наших ресурсов изображений в папку dist с помощью «CopyWebpackPlugin». С изображениями, скопированными в папку distfolder, наши относительные пути в src тегов <img> в html должны работать.

Давайте попробуем этот подход, указав наш src of <img> тегов непосредственно в html вместо того, чтобы устанавливать их из javascript.

1. В ./src/scripts/app.js удалите два оператора import для home.png и nature.jpg, а также удалите код, устанавливающий src для двух тегов <img>:

Выше мы прокомментировали импорт наших файлов изображений в app.js (строки № 6–13).

2. В ./src/index.html укажите src для двух тегов <img> как относительные пути к двум изображениям:

./src/index.html

Обратите внимание, что значения атрибутов src для двух тегов img выше (строки №15 и 20) теперь используют относительные пути для файлов изображений.

3. Установите CopyWebpackPlugin

$ npm install --save-dev copy-webpack-plugin

4. Импортируйте плагин в webpack.config и добавьте его в массив плагинов, как показано ниже:

./webpack/webpack.config.js

Выше, в webpack.config.js, мы импортировали copy-webpack-plugin (строка №3), а затем добавили и настроили плагин в массиве plugins (строки №12–14).

5. Теперь, когда вы снова запустите npm start, CopyWebpackPlugin скопирует все файлы из src / images в папку «images» внутри нашей выходной папки «dist». Когда вы открываете / обновляете index.html в браузере, изображения должны отображаться, теперь они обслуживаются из папки «images».

На этом мы завершаем нашу тему «Работа с изображениями в веб-пакете». Далее мы увидим, как использовать параметр «public-path» в webpack.config.js для публикации наших пакетов сценариев и изображений по некоторому удаленному пути.

[Предыдущая: Файл-загрузчик] [Следующая: Public-path]