vue项目使用image-webpack-loader进行图片压缩

1、下载 image-webpack-loader

这里一定要使用cnpm来下载，否则可能会导致包下载的不完全，产生乱码问题。

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

2、配置

在 webpack.base.confi.js 文件中进行配置
这里有两点需要注意的地方：

1. url-loader 和 image-webpack-loader 不能一起使用，否则会导致图片出不来
2. 一定要先写 ‘file-loader’ 才能使用 ‘image-webpack-loader’

具体配置如下：

module: {
  rules: [
   {
	test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   use: [
    {
    loader: 'file-loader',
    options: {
      name: '[name].[hash:7].[ext]',
      outputPath: 'mobile/img'
     }
    },
    {
     loader: 'image-webpack-loader',
     options: {
      mozjpeg: {
       progressive: true,
       quality: 50
      },
      // optipng.enabled: false will disable optipng
      optipng: {
       enabled: false,
      },
      pngquant: {
       quality: [0.5, 0.65],
       speed: 4
      },
      gifsicle: {
       interlaced: false,
      },
      //ios不支持
      // webp: {
      //  quality: 100
      // }
     }
    }
   ]
   }
   ...
  ]
}

如果是在vue-cli3及更高版本中没有webpack.base.confi.js文件的话，在vue.config.js文件中配置

module.exports ={
  ...
  chainWebpack(config){
	config.module
   .rule('images')
   .use('image-webpack-loader')
   .loader('image-webpack-loader')
   .options({
      bypassOnDebug: true
    })
   .end()
  }
}

这篇好文章是转载于：学新通技术网