Nighttime Peanut Migrations
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    viawebp-loaderpublic

    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

    Keywords

    none

    install

    npm i viawebp-loader

    Downloadsweekly downloads

    6

    version

    0.0.5

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar