[Sage 10] Laravel mix + image-minimizer-webpack-plugin

sage
1

The image-minimizer-webpack-plugin is much better maintained (recent update 1 month ago) than the imagemin-webpack-plugin.

However, I am still struggling to get the webpack/mix configuration right. Currently no image files are processed at all.

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

const imageminPluginConfig = [
  ['gifsicle', { interlaced: true }],
  ['jpegtran', { progressive: true }],
  ['optipng', { optimizationLevel: 5 }],
  [
    'svgo',
    {
      plugins: [
        {
          removeViewBox: false,
        },
      ],
    },
  ],
  ['mozjpeg', { quality: 100 }],
  ['webp',    { quality: 100 }],
];

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new ImageMinimizerPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      minimizerOptions: {
        plugins: imageminPluginConfig,
      },
    }),
  ],
});

No notices, warnings or errors during the build. The required imagemin plugin packages are installed.

Note: It would be nice if a “sage10” optional tag could be added to this forum.

1 Like
2

Hi @strarsis - I think I have a working config.

mix.webpackConfig({
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "resources/assets/images",
          to: "images",
        },
      ],
    }),
    new ImageMinimizerPlugin({
      test: /\.(jpe?g|png)$/i,
      filename: "[path][name].webp",
      deleteOriginalAssets: true,
      minimizerOptions: {
        plugins: ["imagemin-webp"],
      },
    }),
  ],
})

I know nothing about Webpack at all, but it seemed to need the CopyWebpackPlugin to move the files so that the ImageMinimizerPlugin could detect it and do its thing… I think. Anyway - works well for me.