This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it?

Googling around provides little to no help unfortunately.

Here's my webpack config:

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]'
            }
        ]
    },
};

Sample of WARNINGS(there are many!)

WARNING in ./~/vis/dist/img/network/addNodeIcon.png
DEPRECATED. Configure gifsicle's interlaced option in it's 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's interlaced option in it's own options. (gifsicle.interlaced)
 @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752
 @ ./~/bootstrap/dist/css/bootstrap.min.css

This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it?

Googling around provides little to no help unfortunately.

Here's my webpack config:

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]'
            }
        ]
    },
};

Sample of WARNINGS(there are many!)

WARNING in ./~/vis/dist/img/network/addNodeIcon.png
DEPRECATED. Configure gifsicle's interlaced option in it's 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's interlaced option in it's own options. (gifsicle.interlaced)
 @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752
 @ ./~/bootstrap/dist/css/bootstrap.min.css

• javascript
• svg
• webpack
• webpack-2
• webpack-style-loader

• You shouldn't pass query string parameter, in webpack2 there is a query section for that. – Hosar Commented Feb 13, 2017 at 14:27
• Can you elaborate? Query section? I've been trying to find webpack 2 example configs, but without luck. – cbll Commented Feb 13, 2017 at 14:29

5 Answers 5

You now need to specify your options to the specific optimizer. so a previous webpack 1.x loader config like;

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,
          }
        }
      }
    }]

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

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

None of the above was working 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
          }
        }
      }
    ]
  }

Webpack 2 now supports "query object" syntax, meaning you can make a separete object for the query parameters. Here is how the image-webpack-loader recommends it in their documentation. I updated it with the newest 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 is the same as webpack 1 top level loaders, and use is the same as webpack 1 loaders at the individual loader level (the one after test). As you can see, it was confusing before, which is why the schema has been renamed in webpack 2.

This is caused by having params in the query object that now belong in one of the child objects.

for example:

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 this is good:

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

The following webpack2 config of image-webpack-loader works fine for me:

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