webpack 图片压缩

安装插件

cnpm install imagemin-gifsicle --save-dev
cnpm install imagemin-mozjpeg --save-dev
cnpm install imagemin-optipng --save-dev
cnpm install imagemin-pngquant --save-dev
cnpm install pngquant-bin --save-dev
cnpm install image-webpack-loader --save-dev

webpack配置

如果是 webpack.base.config.js

 {
        // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // loader: 'url-loader',
        // options: {
        //   limit: 10000,
        //   name: utils.assetsPath('img/[name].[hash:7].[ext]')
        // },
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,// 小于10K的图片转成base64编码的dataURL字符串写到代码中
              fallback: 'file-loader',
              name: utils.assetsPath('img/[name].[hash:7].[ext]')// 其他的图片转移到静态资源文件夹
            }
          },
          {
            loader: 'image-webpack-loader',// 压缩图片
            options: {
              mozjpeg: {//jpeg压缩
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {//png压缩
                enabled: false,
              },
              pngquant: {//png压缩
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {//gif压缩
                interlaced: false,
              }
              // the webp option will enable WEBP
              //webp: {
              // quality: 75
              //}
            }
          }
        ]
      },

如果是 vue.config.js

   chainWebpack: (config) => {
   config.module
            .rule('images')
            .exclude.add(resolve('src/assets/icons')) // 排除icons目录，这些图标已用 svg-sprite-loader 处理，打包成 svg-sprite 了
            .end()
            .use('url-loader')
            .tap(options => ({
                limit: 10240, // 稍微改大了点
                fallback: {
                    loader: require.resolve('file-loader'),
                    options: {
                        // 在这里修改file-loader的配置
                        // 直接把outputPath的目录加上，虽然语义没分开清晰但比较简洁
                        name: 'static/img/[name].[hash:8].[ext]',
                        esModule: false, //低版本默认为false，高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false 
                    }
                }
            }))
            .end()
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
                optipng: { enabled: true }, // 压缩PNG图像
                pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
                gifsicle: { interlaced: false } // 压缩GIF图像
            })
            .end()
            .enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
}