1磨淌、安裝image-webpack-loader
npm install image-webpack-loader
2橙垢、在項(xiàng)目打包時(shí)報(bào)錯(cuò),所以先卸載然后使用cnpm進(jìn)項(xiàng)安裝
npm uninstall image-webpack-loader
使用cnpm進(jìn)行安裝伦糯,親測成功
3、安裝 cnpm 然后將全局的 registry 設(shè)置成阿里的鏡像嗽元,國內(nèi)阿里比較快
npm install cnpm -g --registry=https://registry.npm.taobao.org
4敛纲、cnpm 安裝 image-webpack-loader 會(huì)發(fā)現(xiàn)很快就安裝好了
npm install image-webpack-loader --save-dev image-webpack-loader
5、安裝好后剂癌,在Vue.config.js文件中進(jìn)行配置
chainWebpack: config => {
// 壓縮圖片
if (IS_PROD) {
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.65, 0.9], speed: 4 },
gifsicle: { interlaced: false }
// webp: { quality: 75 }
});
}
},
或
圖片壓縮完畢淤翔!