Using webp-loader

I want to copy-convert every jpg/png copied by mix to webp format. I already found a package for it: https://github.com/kavu/webp-loader

Since I am totally new to Mix and Webpack, I don't know how to use it in mix.

Thats what I have till now:

let ImageminPlugin = require('imagemin-webpack-plugin').default;
mix.webpackConfig({
    plugins: [
        new ImageminPlugin({
            disable: process.env.NODE_ENV !== 'production', // Disable during development
            pngquant: {
                quality: '95-100',
            },
            test: /\.(jpe?g|png|gif|svg)$/i,
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(jpe?g|png)$/i,
                loaders: [
                    'file-loader',
                    'webp-loader'
                ]
            }
        ]
    }
});
mix.copy( 'resources/assets/img', 'public/img', false);

The plugin part is working, so mix is minifying all images and also the images are copied as expected. But it doesn't generate webp images

bernhardh

7 years ago

Level 1

Nobody?

jmilewski

6 years ago

Level 3

Hi. Maybe not for you, but for everyone else who will find this question.

let mix = require('laravel-mix');
require('laravel-mix-imagemin');
const ImageMinWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");

// Public website directory
let distPath = 'public';

mix
    .setPublicPath(distPath)
    .imagemin('img/**/**.*',{ context: 'resources' })
    .webpackConfig({
    plugins: [
        new ImageMinWebpWebpackPlugin({
            config: [
                {
                    test: /(img).*\.(jpe?g|png)/,
                    options: {
                        quality: 75
                    }
                }
            ],
            overrideExtension: false
        })
    ]
});

1 like

Please or to participate in this conversation.