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!./~/[email protected]@postcss-loader?{}!./~/[email protected]@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!./~/[email protected]@postcss-loader?{}!./~/[email protected]@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' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

] ? ? ? ? ? ? ? ? ? ? ??

}