扩展Laravel Mix以预处理响应式图像

npm install laravel-mix-image imagemin-webpack-plugin --save-dev

const mix = require('laravel-mix');
require('laravel-mix-image');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
        processCssUrls: false // 禁止Laravel Mix处理CSS中的URL
   })
   .copy('resources/images', 'public/images') // 将需要处理的图像文件复制到public/images目录
   .webpackConfig({
        plugins: [
            new ImageminPlugin({
                test: /\.(jpe?g|png|gif|svg)$/i,
                cacheFolder: path.resolve(__dirname, '.cache'),
                jpegtran: {
                    progressive: true
                },
                plugins: [
                    imageminMozjpeg({
                        quality: 75,
                        progressive: true
                    }),
                    imageminPngquant({
                        quality: [0.65, 0.9],
                        speed: 4
                    }),
                    imageminGifsicle({
                        interlaced: false,
                        optimizationLevel: 3
                    }),
                    imageminSvgo({
                        removeViewBox: false,
                        removeDimensions: true,
                        cleanupIDs: true
                    })
                ]
            })
        ]
    });

mix.image('public/images/logo.png', {
    widths: [320, 640, 960], // 响应式图像的宽度
    formats: ['jpeg', 'webp'], // 响应式图像的格式
    outputDir: 'public/images/responsive' // 处理后的响应式图像输出目录
});