Как использовать webp в css на webpack?

Question

[Антон Мисягин]

Репозиторий
webpack 4
В исходниках проекта (папка src) лежат скачанные с интернет jpg, png. С помощью multi-loader и webp-loader конвертирую данные картинки в webp версию и заодно сохраняю исходник. Т.е. на выходе тот же самый (jpg или png) + webp. Правило, которое описывает данный процесс вот:

{
				test: /\.(jpe?g|png)$/i,
				loader: multi(
					'file-loader?name=[name]_[hash:7].webp!webp-loader?{quality: 95}',
					'file-loader?name=[name]_[hash:7].[ext]'
				)
			}

Использую препроцессор стилей sass.
При подгрузке ресурсов внутри файла стилей, например:
src: url('fonts/GothaProLig.otf')
используется лоадер url-loader
Вот пример как я обращаюсь из разметки к различным версиям изображения и это работает (препроцессор pug):

picture
      source(type='image/webp', srcset=require('!!file-loader?name=[name]_[hash:7].webp!./img/as.jpg'))
      img(src=require('!!file-loader?name=[name]_[hash:7].[ext]!./img/as.jpg'))

Теперь внимание вопрос, как описать процесс обращения к webp версии файла внутри файла стилей.

PS:

src: url(require('!!file-loader?name=[name]_[hash:7].webp!./img/as.jpg'))

Так не работает :)

Answer 1

[Alexander Yeltsov]

Сначала нужно сделать проверку в файле js, поддерживает ли браузер формат webp:

function testWebP(callback) {

var webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height == 2);
};
webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
}

testWebP(function (support) {

if (support == true) {
document.querySelector('body').classList.add('webp');
}else{
document.querySelector('body').classList.add('no-webp');
}
});

а затем задать свойства в файле стилей, например:

.webp div { background: url(../img/image.webp) 0 0 no-repeat; }

Есть ещё один вариант:
https://www.npmjs.com/package/webpack-css-replace-...
но я использую первый.