webpack-contrib/image-minimizer-webpack-plugin

Doesn't seem to work with responsive loader

talha5389 opened this issue · 12 comments

talha5389 commented

This is my config file

const ImageminPlugin = require('imagemin-webpack').ImageminWebpackPlugin;
const responsiveSharp = require('responsive-loader/sharp');
const ImageminWebp = require('imagemin-webp');

const config = {
    entry: './src/index.js',
    output: {
        
        filename: '[name].js',
        pathinfo: false
    },
    module: {
        rules: [
            {
                test: /\.(css)$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: "css-loader", // creates style nodes from JS strings
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|svg|bmp|gif|webp)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'images/[name].[hash].[ext]',
                            fallback: 'responsive-loader',
                            adapter: responsiveSharp
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        
    ],
}

const imagemin2 = new ImageminPlugin({
    // name: 'imagemin/[name].[hash].webp',
    imageminOptions: {
        plugins: [
            ImageminWebp({
                loseless: true
            })
        ]
    }
});

// config.plugins.push(imagemin);
config.plugins.push(imagemin2);
module.exports =  config;

Add/removing this plugin with responsive-loader doesn't seem to effect image size in any way however if I disable responsive-loader and enable this it does produce minified image.

I am expecting it to minify images that go through responsive loader.

This is my package.json

"devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "imagemin-gifsicle": "^5.2.0",
    "imagemin-jpegtran": "^5.0.2",
    "imagemin-mozjpeg": "^7.0.0",
    "imagemin-optipng": "^5.2.1",
    "imagemin-svgo": "^7.0.0",
    "imagemin-webp": "^4.1.0",
    "imagemin-webpack": "^3.0.0",
    "responsive-loader": "^1.1.0",
    "sharp": "^0.21.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
alexander-akait commented

@talha5389 please provide link on reproducible test repo, looks for this case you should disable loader for plugin and configure loader in webpack config (standalone loader)

talha5389 commented

@evilebottnawi Sorry about that. I seem to have been using earlier version 3. I updated to v4.0.1. It seems to have fixed the issue

alexander-akait commented

@talha5389 All work fine? So we can close issue?

talha5389 commented

@evilebottnawi Yes. You can close issue.

P.S I found weird behaviour with [path] placeholder for imagemin-webpack. In windows based machine, it seems to skip first character of directory e.g. if image was in images dir, it would output them to mages dir instead of images. To fix that, I added /[path] instead of [path]

alexander-akait commented

@talha5389

I found weird behaviour with [path] placeholder for imagemin-webpack. In windows based machine, it seems to skip first character of directory e.g. if image was in images dir, it would output them to mages dir instead of images. To fix that, I added /[path] instead of [path]

Can you provide minimum reproducible test repo, looks like a bug what we need fix

talha5389 commented

@evilebottnawi Sure. I will do that when I found time today or tomorrow

  • 👍1
alexander-akait commented

@talha5389 confirm bug on windows, WIP on this

alexander-akait commented

Done in master, release will be in near future