Vue-Cli4.0及以上使用 image-webpack-loader 压缩图片优化项目今天介绍一下 webpack

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()
}

现在可以正常打包项目了