Configure optipng's optimizationLevel option in its own options ，这里是说如果你要压缩图片，针对某一类型的，你需要单独的放到他的options里，{

    optipng: {

        optimizationLevel： xxx

    }

}

test:/\.(png|jpg|gif|svg)$/i,

              loaders: [

                  'url-loader?limit=1000&name=images/[name]-[hash:5].[ext]!image-webpack'

              ]

你们用的是mac或者 ubuntu么，在这两个环境下要安装libpng 

mac: brew install libpng

ubuntu:apt-get install libpng

我是这样配置的

{
   test: /\.(png|jpg|gif|svg)$/i,
   use: ['url-loader?limit=1000&name=images/[name]-[hash:5].[ext]','image-webpack-loader']
}

报错是这样：

ERROR in ./images/ico_arrowB.png

Module build failed: TypeError: Cannot read property 'bypassOnDebug' of null

    at Object.module.exports (C:\Users\Administrator\Desktop\cal\node_modules\image-webpack-loader\index.js:30:26)

 @ ./~/css-loader!./~/autoprefixer-loader!./css/common.css 6:3955-3990

 @ ./css/common.css

 @ ./script/jquery-1.11.3.mini.js

 @ multi ./script/user_calendar.js ./script/common.js ./laydate/laydate.js ./script/sweetalert.min.js ./script/jquery.se

archableSelect.js ./script/jquery-1.11.3.mini.js

先安装img-loader :  

npm install img-loader --save-dev

然后在webpack.config.js中配置：

{
     test: /\.(png|jpg|gif|svg)$/i,
     use: [
       {
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: 'assets/[name]-[hash:5].[ext]'
       }
       },
       {
       loader: 'img-loader'
       }
     ]
}

为何 会出现警告呢。。。。webpack2  按照  image-webpack-loader  的写的   那个大神帮忙看看

WARNING in ./src/images/chosen.png

(Emitted value instead of an instance of Error) DEPRECATED. Configure gifsicle's interlaced option in its own options. (gifsicle.interlaced)

 @ ./~/.0.28.0@css-loader!./~/._postcss-loader@1.3.3@postcss-loader?{}!./~/._less-loader@4.0.3@less-loader/dist!./src/components/layer/layer.less 6:192-226

 @ ./src/components/layer/layer.less

 @ ./src/components/layer/layer.js

 @ ./src/app.js

WARNING in ./src/images/chosen.png

(Emitted value instead of an instance of Error) DEPRECATED. Configure optipng's optimizationLevel option in its own options. (optipng.optimizationLevel)

 @ ./~/.0.28.0@css-loader!./~/._postcss-loader@1.3.3@postcss-loader?{}!./~/._less-loader@4.0.3@less-loader/dist!./src/components/layer/layer.less 6:192-226

 @ ./src/components/layer/layer.less

 @ ./src/components/layer/layer.js

 @ ./src/app.js

loaders: [
 {
   test: /\.(gif|png|jpe?g|svg)$/i,
   loaders: [      'file-loader',
     {
       loader: 'image-webpack-loader',
       query: {
         progressive: true,
         optimizationLevel: 7,
         interlaced: false,
         pngquant: {
           quality: '65-90',
           speed: 4
         }
       }
     }
   ]
 }
]
https://github.com/tcoopman/image-webpack-loader

 {

                test: /\.(png|jpg|gif|svg)$/i,

                loaders: [

                    'url-loader?limit=4000&name=[name]-[hash:5].[ext]',

                    'image-webpack-loader'

                ]

            } 

webpack2 不能将loader省略，应完整写出： 'image-webpack-loader'

use:[

{

loader:'url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]!image-webpack'

}

]

我自己换成了webpack2的配置如下：

{

test: /\.(png|jpg|gif|svg)$/i,           

use: [

{

loader: 'url-loader',                     

options: {

name: 'assets/[name]-[hash:5].[ext]',

limit: 4000                                       

}

},

'image-webpack-loader'                                  

]                       

}