Webpack 4集成响应式图片生成适配Zend Framework 3遗留项目

你完全可以在现有Webpack配置基础上，通过结合sharp（高性能图片处理库）和调整CopyWebpackPlugin的配置，实现批量生成指定尺寸的图片，同时保留原图并沿用已有的图片压缩逻辑。

步骤1：安装依赖 #

首先安装sharp，它是处理图片尺寸转换的核心工具：

npm install sharp --save-dev

步骤2：修改Webpack配置 #

我们需要调整CopyWebpackPlugin的配置，添加一个转换函数，在复制图片的同时生成多尺寸版本，并且确保所有生成的文件都会被后续的Imagemin插件优化。

替换你现有的copyOptions和插件配置，修改后的完整代码如下：

const path = require('path');
const glob = require('glob');
const manifest = require('../manifest');
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ImageminJpegoptim = require('imagemin-jpegoptim');
const ImageminOptipng = require('imagemin-optipng');
const Gifsicle = require('imagemin-gifsicle');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const sharp = require('sharp');

// 定义需要生成的目标尺寸
const targetSizes = [768, 1024, 1600, 1920];
const quality = 50;

// 自定义转换函数：生成原图+多尺寸版本
const imageTransform = async (content, filePath) => {
  // 保留原图，先返回原内容
  const results = [content];

  // 仅处理jpg/png图片
  if (/\.jpe?g$|\.png$/i.test(filePath)) {
    const image = sharp(content);
    const ext = filePath.split('.').pop().toLowerCase();

    // 为每个目标尺寸生成新图片
    for (const size of targetSizes) {
      let resizedBuffer;
      if (ext === 'jpg' || ext === 'jpeg') {
        resizedBuffer = await image.resize(size).jpeg({ quality }).toBuffer();
      } else if (ext === 'png') {
        resizedBuffer = await image.resize(size).png({ quality }).toBuffer();
      }
      // 将生成的尺寸图片添加到结果中，文件名格式：[name]-[size].[ext]
      results.push({
        data: resizedBuffer,
        path: filePath.replace(/(\.[^.]+)$/, `-$$${size}$1`)
      });
    }
  }

  return results;
};

let copyOptions = [
  {
    context: path.join(manifest.paths.src, 'public/images/'),
    from: '!(.tmb|captcha)/**/*',
    to: path.join(manifest.paths.dist, 'images/'),
    transform: imageTransform,
    // 修正转换后的文件路径格式
    transformPath: (targetPath) => targetPath.replace(/\$\$/, '')
  },
  {
    context: path.join(manifest.paths.src, 'public/images/'),
    from: '*',
    to: path.join(manifest.paths.dist, 'images/'),
    transform: imageTransform,
    transformPath: (targetPath) => targetPath.replace(/\$\$/, '')
  }
];

module.exports = [
  new CopyWebpackPlugin(copyOptions),
  new ImageminWebpWebpackPlugin({
    config: [{
      test: /\.(jpe?g|png)/,
      options: { quality: quality }
    }],
    overrideExtension: true,
    detailedLogs: false,
    strict: true
  }),
  new ImageminPlugin({
    // disable: manifest.IS_DEVELOPMENT,
    test: /\.(jpe?g|png|gif|svg)$/i,
    cacheFolder: path.join(manifest.paths.src, 'public/.cache'),
    plugins: [
      ImageminJpegoptim({
        max: quality
      }),
      ImageminOptipng({
        optimizationLevel: 7
      }),
      Gifsicle({ optimizationLevel: 3 })
    ],
  })
];

关键说明 #

• 多尺寸生成逻辑：通过sharp.resize()生成指定宽度的图片（默认按比例缩放高度），文件名会自动添加尺寸后缀，比如banner.jpg会生成banner-768.jpg、banner-1024.jpg等。
• 与现有压缩集成：所有生成的图片（包括原图和多尺寸版本）都会经过后续的ImageminPlugin和ImageminWebpWebpackPlugin处理，确保文件大小被优化。
• 过滤规则：保留了你原有的!(.tmb|captcha)过滤规则，不会处理这些目录下的图片。

注意事项 #

• 如果你的图片包含透明通道（比如PNG），sharp会自动保留，无需额外配置。
• 首次运行时因为要处理所有图片，可能会比平时慢一些，后续Webpack会利用缓存提升速度。
• 若需要调整尺寸的生成逻辑（比如固定高度、裁剪等），可以修改sharp.resize()的参数，参考sharp官方文档即可。

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