vuecli3 图片压缩问题

Question

我新增了vue.config.js文件增加了以下配置

module.exports = {

 configureWebpack: {

 externals: {

 "BMap": "BMap"//这个是百度地图的配置

 },

 },

 chainWebpack: config => {

 if (process.env.NODE_ENV === 'production') {

 const imagesRule = config.module.rule('images')

 imagesRule

 .test(/.(png|jpe?g|gif|svg)(?.*)?$/)

 .use('image-webpack-loader')

 .loader('image-webpack-loader')

 .options({

 disable: true

 })

 .end()

 }

 },

}

另外我的图片放在public下面的，打包之后没有任何用 和之前没有配置的时候图片包一样大 请问我是不是那里配置错了？

Answer 1

chainWebpack: config => {

 config.module

 .rule('images')

 .use('image-webpack-loader').loader('image-webpack-loader').tap(() => {

 return {

 mozjpeg: {

 progressive: true,

 },

 // optipng.enabled: false will disable optipng

 optipng: {

 enabled: false,

 },

 pngquant: {

 quality: [0.65, 0.90],

 speed: 4

 },

 gifsicle: {

 interlaced: false,

 },

 webp: {

 quality: 75

 }

 }

 })

 }

应该按文档这样来https://cli.vuejs.org/guide/webpack.html#chaining-advanced

Answer 2

肉眼看，未配置图片压缩、

plugins:[//给图片资源加载配置插件
  require('imagemin-pngquant')({
  //用于图片压缩的imagemin-pngquant，还有一个隐式调用的加载器imagemin-loader
  quality:[0.3,0.5]//图片压缩30%~50%
]