webpack基础 -- 图片处理

需要的loader: url-loader file-loader img-loader postcss-sprites –save-dev
file-loader : 处理css中引入的图片
url-loader : 处理base64图片
img-loader: 压缩图片
postcss-sprites: 合成雪碧图

webpack配置:

主要配置options

rules:{
    { 
        test:/\.(png|jpg|jpeg|gif)$/,
        use:[
            {// 处理css中引入的图片
                loader:'file-loader',
                options:{
                    publicPath:'', 
                    outputPath:'dist/',
                    useRelativePath:true,
                }
            },
            {// base64图片
                loader:'url-loader',
                options:{
                    name:'[name][hash:5].min.[ext]' // 给图片重新命名
                    limit: 1000,
                    publicPath:'', 
                    outputPath:'dist/',
                    useRelativePath:true,
                }
            },
            {// 压缩图片
                loader:'img-loader',
                options:{
                    pngquant:{ // png图片适用
                        quality: 80
                    }
                }
            },
            {// 压缩图片
                loader:'img-loader',
                options:{
                    pngquant:{ // png图片适用
                        quality: 80
                    }
                }
            },
        ]
    },
    ...{ // 合成精灵图 在postcss-loader中
        loader:'postcss-loader',
        options:{
            require('postcss-sprites')({
                spritePath:'dist/assets/imgs/sprites' //精灵图输出位置
                retina:true, // 处理两倍图片的大小 如: logo@2x.png
            }),
            require('postcss-cssnext')()
        }
    }

}