Roots Discourse

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

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.