Lots of deprecated warnings without a clear way to fix them

[lostpebble]

DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options.
DEPRECATED. Configure gifsicle's interlaced option in it's own options. (gifsicle.interlaced)
DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (optipng.optimizationLevel)

I've set up my webpack 2 options like so to try and rectify this after it cropped up in the new version (it seems like the recommended way from the readme):

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            progressive: true,
            optimizationLevel: 4,
            interlaced: false,
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
        include: __dirname,
      },

Tried adding that optipng option there too, because it seems that's what the deprecations want, but no change.

[daltones]

The warnings are about those options passed directly in query (optimizationLevel and interlaced). Now every option must be passed to the correspondent optimizer.

Sadly README is a little messed about those options. 😿

I guess that would work without any problems:

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
        include: __dirname,
      },

[lostpebble]

Much thanks, that seems to do the trick.

[gpltaylor]

How is this possible in webpack 1 with multiple loaders?

{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loaders: [ 'file-loader?name=/static/[name].[ext]?[hash]', 'image-webpack?bypassOnDebug&optimizationLevel=7&gifsicle.interlaced=true' ] }

[daltones]

@gpltaylor The query string can be a regular stringified JSON:

var query = {
  bypassOnDebug: true,
  optipng: {
    optimizationLevel: true
  },
  gifsicle: {
    interlaced: true
  }
};
// ...
{loader: [`image-webpack-loader?${JSON.stringify(query)}`]}

[ankur1163]

I followed this method. Here's my webpack

`var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {app: './src/app.js' },
  output: {filename: 'public/build/bundle.js',
        sourceMapFilename: 'public/build/bundle.map' },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: 'babel-loader',query: {
        presets: ['stage-0','react','es2015'],
        plugins: ["transform-decorators-legacy","transform-class-properties"]
    } },
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]'  },
      {
  test: /\.(jpe?g|png|gif|svg)$/i,
  loaders: [
    'file?hash=sha512&digest=hex&name=[hash].[ext]',
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
  ],

  options: {
    query: {
      mozjpeg: {
        progressive: true
      },
      gifsicle: {
        interlaced: true
      },
      optipng: {
        optimizationLevel: 7
      }
    }
  }
}
    ]
  }
}

but, sill it throw me same sort of warnings`

[gpltaylor]

@ankur1163, I tried the following and this worked for me.

Replace
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'

with
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'

[ankur1163]

thanks @gpltaylor . I also included loader here as well

 {
      loader: 'file-loader?cacheDirectory=true',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }

Thanks

[mattcarlotta]

@gpltaylor Here's a webpack 1.13 config that works for me:

    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader?{gifsicle: {interlaced: true}, optipng: {optimizationLevel: 7}, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
      ]
    }

[PaulRBerg]

Working version for webpack 3+

use: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
{
	loader: 'image-webpack-loader',
	options: {
		mozjpeg: {
			progressive: true,
		},
		gifsicle: {
			interlaced: false,
		},
		optipng: {
			optimizationLevel: 4,
		},
		pngquant: {
			quality: '75-90',
			speed: 3,
		}
	}
}
]

[ForkInSpace]

The documentation on npmjs website doesn't seem to be updated

This is what worked for me...
Taken from official image-webpack-loader github => https://github.com/tcoopman/image-webpack-loader

Good luck!

  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]