Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure the optipng optimLevel option in your own options. (Optipng.optimizationLevel)

Question

This WARNING prints ~ 20 times when you start webpack - it processes and binds just fine, but what does it mean? How can I get rid of it?

A trip to search engines practically does not help, unfortunately.

Here is my webpack configuration:

 const ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require("webpack"); module.exports = { entry: { dashboard: './js/main.js', vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",], }, output: { path: "../public", filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}), new ExtractTextPlugin("/static/[name].css"), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), ], module: { loaders: [ { test: /.js?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: [ 'es2015', 'react', 'stage-0', ], } }, { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}), }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]', 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', { loader: 'image-webpack-loader', } ], }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]' } ] }, }; 

Example of WARNINGS (there are many!)

 WARNING in ./~/vis/dist/img/network/addNodeIcon.png DEPRECATED. Configure gifsicle interlaced option in it own options. (gifsicle.interlaced) @ ./~/css-loader!./~/vis/dist/vis.min.css 6:12847-12887 @ ./~/vis/dist/vis.min.css WARNING in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg DEPRECATED. Configure gifsicle interlaced option in it own options. (gifsicle.interlaced) @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752 @ ./~/bootstrap/dist/css/bootstrap.min.css 

Answer 1

Now you need to specify your parameters for a specific optimizer. therefore, the previous webpack 1.x bootloader configurator, for example:

 loaders: [ 'file-loader?name=assets/[name].[ext]', 'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true' ] 

becomes

  use: [ { loader: 'file-loader', options: { query: { name:'assets/[name].[ext]' } } }, { loader: 'image-webpack-loader', options: { query: { mozjpeg: { progressive: true, }, gifsicle: { interlaced: true, }, optipng: { optimizationLevel: 7, } } } }] 

Notice the options object, with the query embedded inside it.

See https://webpack.js.org/guides/migrating/ and also deltones comments in this release; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595

Answer 2

None of the above worked for me, taking inspiration from the official webpack2 configuration example https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack2.config.js , this is what worked for me

  { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'file-loader', options: { // path where the images will be saved name: 'assets/img/[name].[ext]' } }, { loader: 'image-webpack-loader', options: { mozjpeg: { quality: 65 }, pngquant:{ quality: "10-20", speed: 4 }, svgo:{ plugins: [ { removeViewBox: false }, { removeEmptyAttrs: false } ] }, gifsicle: { optimizationLevel: 7, interlaced: false }, optipng: { optimizationLevel: 7, interlaced: false } } } ] } 

Answer 3

Webpack 2 now supports the syntax "request object", that is, you can make a separete object for request parameters. Here's how image-webpack-loader recommends in their documentation . I updated it with the latest webpack 2 naming standards:

 rules: [ // rules is formerly "loaders" in webpack 1 { test: /\.(svg|jpe?g|png|gif|ico)(\?{0}(?=\?|$))/, use: [ // use is formerly "loaders" in webpack 1 // file-loader has a bug where it doesn't yet recognize query object // syntax for webpack 2, so the query options `assets/images/[name].[ext]` // are ignored until they fix that, // { // loader: 'file', // query: { // name: 'assets/images/[name].[ext]' // } //}, 'file?name=assets/images/[name].[ext]', // or just 'file-loader' { loader: 'image-webpack', query: { progressive: true, optimizationLevel: 7, interlaced: false, pngquant: { quality: '65-90', speed: 4 } } // you can also do it like this: // query: { // mozjpeg: { // progressive: true, // }, // gifsicle: { // interlaced: false, // }, // optipng: { // optimizationLevel: 7, // } // } } ] } ] 

Note that rules same as the top level of webpack 1 loaders , and use same as webpack 1 loaders at the individual bootloader level (after test ). As you can see, this was confusing before, so the scheme was renamed to webpack 2.

Answer 4

This is caused by the presence of parameters in the request object, which now belong to one of the child objects.

eg:

This is bad:

  'file-loader', { loader: 'image-webpack-loader', query: { progressive: true, optimizationLevel: 7, pngquant: { quality: '65-90', speed: 4 }, mozjpeg: { progressive: true }, gifsicle: { interlaced: true }, optipng: { optimizationLevel: 7 } } } 

where is it good:

  'file-loader', { loader: 'image-webpack-loader', query: { pngquant: { quality: '65-90', speed: 4 }, mozjpeg: { progressive: true }, gifsicle: { interlaced: true }, optipng: { optimizationLevel: 7 } } } 

Answer 5

The following webpack2 configuration for image-webpack-loader is great for me:

 { loader: 'image-webpack-loader', options: { progressive: true, optipng: { optimizationLevel: 7, }, mozjpeg: { quality: 65 }, gifsicle: { interlaced: true, }, pngquant: { quality: '65-90', speed: 4 } } }