viawebp-loader

WebP image loader & converter loader for Webpack.

Install

npm install viawebp-loader --save-dev

Usage

(1) use require or import to get the path of WebP from JPG or PNG.

in your source code

var imageInfo =require('xxxx/xx.jpg'); // the result of imageInfo is WebP path
 

in your webpack.config.js

rules:[{ 
    test: /\.(png|jpe?g)$/,
    loader: 'viawebp-loader',
    enforce: 'post',
    options: {
        expose: 'webp', 
        name: 'img/[name].[hash:7].[ext]',
        webp: {
            quality:75
        }
    }}]

(2) sometimes if you want to get both JPG and WebP path, you can using vaiwebp-loader along with common file-loader.

in your source code

var imageInfo=require('xxxx/xx.jpg');
 

in your webpack.config.js

rules:[{
        test: /\.(png|jpe?g)$/,
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:7].[ext]'
        }
    },
    { 
        test: /\.(png|jpe?g)$/,
        loader: 'viawebp-loader',
        enforce: 'post',
        options: {
            expose: 'all', 
            name: 'img/[name].[hash:7].[ext]',
            webp: {
                quality:75
            }
        }
    }]

expose option will effect the result of imageInfo , but both JPG and WebP file will still be exported to dist dir.

default  => xxxx.jpg   
webp => xxxx.webp   
all => {default:'xxxx.jpg',webp:'xxxx.webp'}  

options

Name	Type	Default	Description
expose	{String}	undefined	effect the result of invoking require/import. all,webp and undefined
name	{String}	[hash].[ext]	configure a custom filename template for your file
webp	{Object}		For all possible options please visit "API" section of the official imagemin-webp README

License

MIT