1.0.3 • Published 3 years ago
webp-responsive-loader v1.0.3
webp-responsive-loader
Загрузчик webpack для адаптивных изображений. Создает несколько изображений формата .webp из одного исходного изображения и возвращает srcset и sizes. Чтобы иметь представление что такое адаптивные изображение можете пройти сюда Responsive Images.
Установка
npm
npm install webp-responsive-loader --save-dev
yarn
yarn webp-responsive-loader -D
Использование
Добавьте правило для загрузки адаптивных изображений в конфигурацию вашего webpack:
module.exports = {
// ...
module: {
rules: [
{
test: /\.(jpe?g|png|bmp)$/i,
use: {
loader: "responsive-loader",
options: {
name: "[path][name].[ext]", // параметр name является обязательным для работы лоадера
},
},
},
],
},
};
Затем импортируйте изображения в свои файлы JavaScript:
import responsiveImage from 'img/myImage.jpg';
...
<img
srcSet={responsiveImage.srcset}
sizes={responsiveImage.sizes}
/>
...
Примечания:
sizes
, без размеров браузер предполагает, что изображение всегда 100vw для любого окна просмотра.srcset
, Современные браузеры будут выбирать наиболее близкое к изображению лучшее изображение в зависимости от плотности пикселей вашего экрана.
Параметры
Параметр | Тип | Default | Описание |
---|---|---|---|
name | string | undefined | Это обязательный параметр. Шаблон имени файла для выходных файлов. |
publicPath | string | undefined | Папка, в которую будут помещены при сборке проекта file. |
emitOriginalFile | boolean | undefined | Если true, то добавляет оригинальный файл в сборку и возвращает путь к нему в переменной srcOriginal |
resizeList | array integer | [320, 720, 1080] | Ширина новых webp файлов. Данный список используется когда нужно передать свои размеры конечных фалов webp |
placeholder | string | undefined | placeholder. Будет показан пока основное изображение загружается |
Пример использования
Добавьте пдобные инструкции в настройки webpack. webpack.config.js
module.exports = {
entry: {...},
output: {...},
module: {
rules: [
{
test: /\.(jpe?g|png|bmp)$/i,
use: [
{
loader: "webp-responsive-loader",
options: {
name: "[path][name].[ext]",
resizeList: [320, 960, 1800],
placeholder: true,
publicPath: "images"
},
},
],
}
]
},
}
component.js
import responsiveImage from 'img/myImage.jpg';
...
<img
srcSet={responsiveImage.srcset}
sizes={responsiveImage.sizes}
placeholder={responsiveImage.placeholder}
/>
...
Typescript
Если в вашем проекте используется typescript, то вы можете использовать файл деклараций.
tsconfig.json
{
...
"compilerOptions": {
...
"typeRoots": ["src/typings"],
...
}
}
src/typings/types.d.ts
...
/// <reference types="webp-responsive-loader" />
...