vue-cli3 图片压缩【image-webpack-loader】使用

1.下载image-webpack-loader
注：最好用cnpm下载，npm下载会有问题

cnpm install --save-dev image-webpack-loader

2.在vue.config.js中修改相关配置

module.exports = {
…
// 默认设置
const defaultOptions = {
bypassOnDebug: true
}
// 自定义设置
const customOptions = {
mozjpeg: {
progressive: true,
quality: 50
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.5, 0.65],
speed: 4
},
gifsicle: {
interlaced: false,
},
// 不支持WEBP就不要写这一项
webp: {
quality: 75
}
}
chainWebpack: config => {
…
config.module.rule(‘images’)
.test(/.(gif|png|jpe?g|svg)$/i)
.use(‘image-webpack-loader’)
.loader(‘image-webpack-loader’)
.options(customOptions) //默认配置就defaultOptions 这个
.end()
…
}
}