如何通过Webpack 4实现类TinyPNG的图片压缩配置

你遇到的问题主要是loader执行顺序错误、缺少对应图片格式的压缩插件，以及配置项放错位置导致的。下面一步步帮你修正配置，实现类似TinyPNG的压缩效果：

第一步：安装必要的依赖 #

除了你已有的包，还需要安装针对PNG、JPG的压缩插件（这些是实现接近TinyPNG效果的核心）：

npm install imagemin-pngquant imagemin-mozjpeg --save-dev

第二步：修正Webpack配置 #

你的配置存在几个关键问题：

1. Loader执行顺序颠倒：Webpack的loader是从右到左/从下到上执行的，应该先让imagemin-loader压缩图片，再用file-loader输出文件，所以use数组的顺序需要调换。
2. name配置属于file-loader的参数，不是imagemin-loader的，要移到file-loader的options里。
3. 只配置了GIF的压缩插件，缺少PNG和JPG的处理逻辑，所以这两类图片没有压缩效果。

修正后的完整配置如下：

let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let { imageminLoader } = require("imagemin-webpack");
let imageminGifsicle = require("imagemin-gifsicle");
let imageminPngquant = require("imagemin-pngquant");
let imageminMozjpeg = require("imagemin-mozjpeg");

let conf = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist/'),
    filename: 'main.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          // 先执行file-loader输出文件
          {
            loader: "file-loader",
            options: {
              name: "[hash]-compressed.[ext]",
              outputPath: 'images/' // 可选：把压缩后的图片放到dist/images目录下，结构更整洁
            }
          },
          // 再执行imagemin-loader压缩图片
          {
            loader: imageminLoader,
            options: {
              cache: true, // 开启缓存，避免重复压缩已处理过的图片
              bail: false,
              imageminOptions: {
                plugins: [
                  // GIF压缩配置
                  imageminGifsicle({
                    interlaced: true,
                    optimizationLevel: 3
                  }),
                  // PNG压缩配置（接近TinyPNG的效果）
                  imageminPngquant({
                    quality: [0.6, 0.8], // 质量范围，可根据需求调整，值越小压缩率越高
                    speed: 4
                  }),
                  // JPG压缩配置
                  imageminMozjpeg({
                    quality: 75, // 质量值，范围0-100
                    progressive: true
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
};

module.exports = conf;

第三步：验证效果 #

执行你的build命令后，去dist目录下查看图片：

• 文件名会变成[hash]-compressed.[ext]（如果配置了outputPath，会在dist/images目录下）
• 对比原图片和压缩后的图片体积，应该能看到明显减小，且画质损失在可接受范围内（和TinyPNG效果接近）

另外补充几个注意点：

• 如果你的图片已经是经过压缩的，imagemin可能不会再减小体积，建议用未压缩的原图测试效果。
• cache: true会在node_modules/.cache/imagemin-webpack目录下缓存压缩结果，下次构建会跳过已处理的图片，提升构建速度。

内容的提问来源于stack exchange，提问作者Hett