Обычно есть два способа использования изображений в веб-приложении - с помощью тега ‹img› в HTML или через css, установив свойство 'background-image' в Класс или стиль css элемента HTML.
Изображения обычно хранятся либо на каком-то CDN, либо в отдельной папке на веб-сервере. В качестве местоположения изображения вы указываете URL-адрес изображения или относительный путь к изображению, если оно хранится в папке на сервере.
С помощью Webpack загрузку изображений можно оптимизировать с помощью загрузчика URL-адресов, который преобразует ваши изображения в строки base64 и вставляет их в код. С изображениями, хранящимися внутри пакета приложения, браузер пользователя будет экономить на запросах к CDN или веб-серверу для получения этих изображений, тем самым улучшая производительность приложения.
Преобразование изображений в строки base64 и их сохранение в коде нормально для изображений меньшего размера, однако с изображениями большего размера размер пакета приложения будет значительно увеличиваться, чтобы перевесить преимущество экономии на поездке на сервер для получения изображение. Для этого url-loader предоставляет параметр - limit. Если указано limit, url-loader преобразует в строку base64 только те изображения, размер которых не превышает указанного лимита.
Для изображений с размерами, превышающими указанный предел, url-loader вместо преобразования в строку base64 передаст изображение в file-loader. Наряду с изображением url-загрузчик также передаст файловому загрузчику любые параметры конфигурации, которые вы могли указать для url-loader в webpack.config.
Итак, давайте посмотрим, как запаковать наши изображения с помощью webpack:
1. Установите загрузчик файлов и загрузчик URL.
$ npm install url-loader file-loader --save-dev
2. Настройте url-загрузчик в webpack.config, добавьте ниже в массив modules.rules в webpack.config:
./webpack/webpack.config.js
Выше мы добавили второе правило в массив module.rules конфигурации нашего веб-пакета (строки 12–22).
Для 'test' этого правила было установлено значение /\.(png|jp(e*)g|svg)$/, что означает для любого файла с расширением имени файла, совпадающим с .png, .jpeg , .jpg или .svg, используйте загрузчик, указанный в свойстве 'use', то есть url-loader. Далее мы указали параметры для URL-загрузчика - limit: 8000, что означает, что любое изображение размером до 8 КБ будет преобразовано в строку base64 и встроено в код. Любое изображение размером более 8 КБ будет передано файловому загрузчику для обработки вместе с его параметрами. Вот почему мы указали свойство name в объекте параметров, чтобы, когда url-loader передает любой файл размером ›8kb в file-loader, он также передает name как часть параметров, которые затем file-url будет использовать для наименования файла изображения в пакете приложения.
3. Теперь мы добавим пару изображений небольшого размера для, скажем, Домашний значок и Значок настроек нашего приложения. Щелкните по ссылкам, чтобы загрузить изображения. Оба они меньше ограничения в 8 КБ, указанного для url-loader.)
- добавьте папку 'images' в нашу папку ‘src’
- загрузите два изображения (Значок главного экрана, Значок настроек) и сохраните их под 'src/images'
4. Затем мы немного изменим файл шаблона ./src/index.html, чтобы добавить тег ‹img›, как показано ниже:
./src/index.html
Обратите внимание на строки 13–17 выше - мы добавили новый ‹div› с тегом ‹img› внутри с id=home.
5. Теперь, чтобы Webpack увидел домашнее изображение как зависимость, а затем обработал его с помощью url-loader, нам нужно импортировать это изображение. в нашем javascript.
./src/scripts/app.js
Выше, в app.js, мы импортировали home.png как homeIcon (строка №6) и присвоили ему значение src из тега <img>, который мы добавили в index.html на шаге 4 (строки №8–9).
Снова запустите команду npm start, чтобы перезапустить веб-пакет с новыми настройками:
$ npm start
6. Когда webpack начинает объединение пакета, когда он проходит через app.js и встречает строку import homeIcon from '../images/home.png';, он видит это как модуль .png, поэтому он применяет правило, которое проходит проверку для '.png' , который просит его использовать 'url-loader'. url-loader сначала проверит размер файла, который составляет 4 КБ для home.png, меньше «предельного» размера 8 КБ, указанного в параметрах url. -загрузчик. Таким образом, url-loader преобразует файл png в строку base64 и сохранит его встроенным в src тега <img>.
7. Обновите браузер (http: // localhost: 9000 / index.html), и теперь на странице должен быть виден значок «Домой».
Изображения в классе CSS
Затем давайте посмотрим, может ли url-loader / file-loader, который мы добавили в предыдущем разделе, обрабатывать изображения, которые мы добавляем background-image в css-class.
1. В файле ./src/styles/app.css добавьте следующий класс css:
./src/styles/app.css
2. В ./src/index.html добавьте div с классом, установленным выше определенного класса.
./src/index.html
Выше мы добавили <div> с class="settingIcon", чтобы мы могли увидеть и протестировать класс css, который мы создали на шаге № 1 выше.
3. Сохраните файлы и запустите npm start (он может работать сам по себе из-за HMR devServer, и на этот раз мы не изменили webpack.config.js)
4. На этот раз, когда webpack начинает объединение и его css-загрузчик просматривает наш файл app.css, когда он встречает строку background-image: url('./../images/css3Logo.png');, он передает обработку URL-адреса url-loader. url-loader снова увидит, что размер файла (4 КБ) меньше limit (8 КБ), поэтому он преобразует изображение в строку base64 и использует его встроенным в сгенерированный пакет css.
5. Снова откройте / обновите (или, если он перезагружается сам по себе из-за HMR devServer), страница в браузере и значок настроек должны быть видны как фоновое изображение для последнего добавленного div.
Далее мы узнаем, как заставить webpack загружать изображения большего размера в виде файловых ресурсов с помощью файлового загрузчика вместо того, чтобы позволить url-загрузчику вставлять их как строку base64 в код.
[Предыдущая: Плагин извлечения текста] [Следующая: Загрузчик файлов]
