Laravel mix image processing

Before Laravel 5(ish), people used gulp to minimize/refresh images. It just came with it and was easy to implement. Now with Laravel Mix, you have to install a few npm packages in order to have the image compression that gulp did.

Googling away, I came across a forum discussion that had all my answers. You need to install 3 packages to do it, but it works. I also followed the suggested ‘settings’ that another person suggested. Here it is:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');

mix.webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/assets/images',
            to: 'img', // Laravel mix will place this in 'public/img'
        }]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            plugins: [
                imageminMozjpeg({
                    quality: 80,
                })
            ]
        })
    ]
});

Here are the packages you need:

Imagemin

copy-webpack-plugin

imagemin-mozjpeg