1、安装image-webpack-loader
npm install image-webpack-loader
2、在项目打包时报错,所以先卸载然后使用cnpm进项安装
npm uninstall image-webpack-loader
使用cnpm进行安装,亲测成功
3、安装 cnpm 然后将全局的 registry 设置成阿里的镜像,国内阿里比较快
npm install cnpm -g --registry=https://registry.npm.taobao.org
4、cnpm 安装 image-webpack-loader 会发现很快就安装好了
npm install image-webpack-loader --save-dev image-webpack-loader
5、安装好后,在Vue.config.js文件中进行配置
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 }
});
}
},
或
图片压缩完毕!