vue-cli4.0 vue.config.js配置——图片压缩

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 }
        });
    }
  },

或

图片压缩完毕！