webpack-contrib/image-minimizer-webpack-plugin

image doesn't compressed with loader

Closed this issue · 5 comments

sesn commented

Compiler Output
screen shot 2018-06-29 at 6 10 23 am

As you see the image size of screenshot.png is around 800KB, no matter what optimization level is used, the image size in build folder is same.

Version Info
webpack : 4.12.0

webpack.config.js

const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { ImageminWebpackPlugin, imageminLoader } = require('imagemin-webpack');

// Before imagemin
const imageminGifsicle = require('imagemin-gifsicle');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminOptipng = require('imagemin-optipng');
const imageminPngquant = require('imagemin-pngquant');
const imageminSvgo = require('imagemin-svgo');
const imageminManifest = {};

const path = require('path');
const fs = require('fs');

const appDirectory = fs.realpathSync(process.cwd());

function resolveApp(relativePath) {
  return path.resolve(appDirectory, relativePath);
}

const DEV = process.env.NODE_ENV === 'development';

const paths = {
  appSrc: resolveApp('src'),
  appBuild: resolveApp('build'),
  appIndexJs: resolveApp('src/app.js'),
  appNodeModules: resolveApp('node_modules')
};

module.exports = {
  target: 'web',
  mode: DEV ? 'development' : 'production',
  devtool: DEV ? 'cheap-eval-source-map' : 'source-map',
  entry: {
    app: paths.appIndexJs
  },
  output: {
    filename: DEV ? 'bundle.js' : 'bundle.[hash:8].js',
    path: paths.appBuild
  },
  module: {
    rules: [
      // Disabling require.ensure as it's not a standard language
      { parser: { requireEnsure: false } },

      // js loader
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      // css loader
      {
        test: /\.(sass|scss|css)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader
        },{
          loader: 'css-loader',
          options: {
            importLoader: 1
          }
        },{
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9',
                ],
              }),
            ],
          }
        },
        {
          loader: 'sass-loader'
        }]
      },

      //img webpack optimization loader
      {
        test: /\.(png|gif|jpe?g|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              emitFile: true,
              useRelativePath: true,
              name: "[name].[ext]",
            }
          },
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new ImageminWebpackPlugin({
      cache: true,
      bail: false, // Ignore errors on corrupted images
      loader: false,
      imageminOptions: {
        plugins: [
          imageminGifsicle({
            interlaced: true,
            optimizationLevel: 3
          }),
          // imageminOptipng({
          //   interlaced: true,
          //   optimizationLevel: 3
          // }),
          imageminPngquant({
            quality: 10,
            speed: 4,
          }),
          imageminJpegtran({
            progressive: true,
            optimizationLevel: 3
          })
        ]
      },
      manifest: imageminManifest, // This object will contain source and interpolated filenames
      // maxConcurrency: os.cpus().length - 1,
      name: "[hash].[ext]",
      test: /\.(jpe?g|png|gif|svg)$/i,
      include: undefined,
      exclude: undefined
    })
  ],
  performance: {
    hints: false
  }
}
sesn commented

Figured out the issue. It is because of cache.
If I given cache true, then sometimes it is working. Sometimes it is not working.
Can u explain what is the reason behind this?

alexander-akait commented

@sesn should be works always 😄 Maybe you can create minimum reproducible test repo?

sesn commented

@evilebottnawi ,
Test repo ,
I have written the test repo to reproduce the error.

  • 👍1