В предыдущих уроках мы видели, как использовать 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]