webpack压缩图片优化都有哪几种方式，具体配置代码

Webpack压缩图片可以采用以下几种方式：

1. 使用image-webpack-loader插件压缩图片
安装image-webpack-loader插件，并在webpack配置文件中进行如下配置：

   const path = require('path');
   const webpack = require('webpack');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   const ImageminPlugin = require('imagemin-webpack-plugin').default;
   const imageminMozjpeg = require('imagemin-mozjpeg');

   module.exports = {
     mode: 'production',
     entry: './src/index.js',
     output: {
       filename: 'main.[hash].js',
       path: path.resolve(__dirname, 'dist')
     },
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'file-loader',
             },
             {
               loader: 'image-webpack-loader',
               options: {
                 mozjpeg: {
                   progressive: true,
                   quality: 65
                 },
                 optipng: {
                   enabled: false,
                 },
                 pngquant: {
                   quality: [0.65, 0.90],
                   speed: 4
                 },
                 gifsicle: {
                   interlaced: false,
                 },
                 webp: {
                   quality: 75
                 }
               },
             },
           ],
         },
         {
           test: /\.css$/i,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader'
           }
         }
       ]
     },
     plugins: [
       new webpack.ProgressPlugin(),
       new HtmlWebpackPlugin({
         template: './src/index.html',
         filename: 'index.html'
       }),
       new CopyWebpackPlugin({
         patterns: [
           { from: './src/assets', to: 'assets' }
         ]
       }),
       new MiniCssExtractPlugin({
         filename: 'main.[hash].css'
       }),
       new OptimizeCssAssetsPlugin(),
       new UglifyJsPlugin(),
       new ImageminPlugin({
         plugins: [
           imageminMozjpeg({
             quality: 65,
             progressive: true
           })
         ]
       })
     ]
   };

上述代码中，使用了image-webpack-loader插件，并进行了相关的图片压缩配置。

2. 使用imagemin-webpack-plugin插件压缩图片

安装imagemin-webpack-plugin插件，并在webpack配置文件中进行如下配置：

   const path = require('path');
   const webpack = require('webpack');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   const ImageminPlugin = require('imagemin-webpack-plugin').default;
   const imageminMozjpeg = require('imagemin-mozjpeg');

   module.exports = {
     mode: 'production',
     entry: './src/index.js',
     output: {
       filename: 'main.[hash].js',
       path: path.resolve(__dirname, 'dist')
     },
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'file-loader',
             }
           ],
         },
         {
           test: /\.css$/i,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader'
           }
         }
       ]
     },
     plugins: [
       new webpack.ProgressPlugin(),
       new HtmlWebpackPlugin({
         template: './src/index.html',
         filename: 'index.html'
       }),
       new CopyWebpackPlugin({
         patterns: [
           { from: './src/assets', to: 'assets' }
         ]
       }),
       new MiniCssExtractPlugin({
         filename: 'main.[hash].css'
       }),
       new OptimizeCssAssetsPlugin(),
       new UglifyJsPlugin(),
       new ImageminPlugin({
         test: /\.(jpe?g|png|gif|svg)$/i,
         plugins: [
           imageminMozjpeg({
             quality: 65,
             progressive: true
           })
         ]
       })
     ]
   };

上述代码中，使用了imagemin-webpack-plugin插件，并进行了相关的图片压缩配置。

以上两种方式都可以进行图片压缩，具体的配置可以根据需要进行修改。