New syntax for the image-file-loader in webpack2

[smartcris]

After the first yarn start I got several warnings:

WARNING in ./src/images/react_logo.svg
(Emitted value instead of an instance of Error) DEPRECATED. Configure gifsicle's interlaced option in its own options. (gifsicle.interlaced)
@ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/styles/main.scss 6:4940-4977
@ ./src/styles/main.scss
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/only-dev-server babel-polyfill whatwg-f......

I think you should update the loaders syntax in webpack 2 like so:

   test: /\.(gif|png|jpe?g|svg)$/i,
   use: [
      'file-loader', {
        loader: 'image-webpack-loader',
        options: {
          gifsicle: {
            interlaced: false,
          },
          optipng: {
            optimizationLevel: 7,
          },
          pngquant: {
            quality: '65-90',
            speed: 4
          },
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          // Specifying webp here will create a WEBP version of your JPG/PNG images
          webp: {
            quality: 75
          }
        }
      }
    ]

[smartcris]

Upgrading to Fiber I got this error:

Uncaught TypeError: Cannot read property 'instanceOf' of undefined
at eval (index.js:161)
at Object../node_modules/redbox-react/lib/index.js (app.529fd130306ecd1a2d53.js:5578)
at webpack_require (app.529fd130306ecd1a2d53.js:707)
at fn (app.529fd130306ecd1a2d53.js:112)
at eval (AppContainer.dev.js:13)
at Object../node_modules/react-hot-loader/lib/AppContainer.dev.js (app.529fd130306ecd1a2d53.js:4236)
at webpack_require (app.529fd130306ecd1a2d53.js:707)
at fn (app.529fd130306ecd1a2d53.js:112)
at Object.eval (AppContainer.js:8)
at eval (AppContainer.js:10)