Vue-Cli4.0及以上使用 image-webpack-loader 压缩图片优化项目

1、安装  image-webpack-loader 

npm install image-webpack-loader --save -dev

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 会发现很快就安装好了

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

5、安装好后，在Vue.config.js文件中进行配置

chainWebpack(config) {
    // 图片压缩
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
}

图片压缩完毕！