Webpack 4 - 生成响应式图像

Question

我想从一张基本图像生成不同尺寸的图像。 F.e.我有一张 1920x1080 的图像，处理后我想要尺寸为（768、1024、1600、1920）的图像。

我知道有一个加载器可以完成此任务：https://github.com/herrstucki/responsive-loader

但是，我有许多“遗留”PHP 应用程序（Zend Framework 3）的视图脚本，这些脚本不由 webpack（无 HtmlWebpackPlugin）处理，因为与 Zend Framework 一起使用会太复杂。

有没有办法，只指向我的图像的源目录（glob）并转换其中的所有图像并将它们（以及生成的版本）保存到我的 dist 文件夹中？

我用 ImageMin 做了类似的事情：

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

// const files = glob.sync(path.join(manifest.paths.src, 'public/images/**/*.jpg'));

const quality = 50;

let copyOptions = [
    {
        context: path.join(manifest.paths.src, 'public/images/'),
        from: '!(.tmb|captcha)/**/*',
        to: path.join(manifest.paths.dist, 'images/'),
    },
    {
        context: path.join(manifest.paths.src, 'public/images/'),
        from: '*',
        to: path.join(manifest.paths.dist, 'images/'),
    }
];

// plugin config which gets passed to webpack config (pushed to plugins: [...])
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({
                // if you change this, do not foget to empty the cache folder!
                max: quality
            }),
            ImageminOptipng({
                optimizationLevel: 7
            }),
            Gifsicle({
                optimizationLevel: 3
            })
        ],
    })
];

此配置将我的图像转换为适合网络的尺寸（就文件大小而言！）。是否有机会在此配置中集成生成多个图像尺寸（就尺寸而言！）的过程？

Answer 1

对于寻找解决方案的时间旅行者；我使用

image-minimizer-webpack-plugin

和

sharp

从单个图像生成不同尺寸的图像

// webpack.config.ts

import CopyWebpackPlugin from "copy-webpack-plugin";
import ImageMinimizerPlugin from "image-minimizer-webpack-plugin";

const imagesToGenerate = {
  "assets/images/logo.png": {
    name: "icon",
    sizes: [24, 32, 64]
  ],
  "assets/images/preview.png": {
    name: "preview",
    sizes: [256, 512]
  ]
}

export default {
  // this does not conflict with other webpack settings
  // include the images to generate as assets passed to optimisation
  plugins: [new CopyPlugin({ patterns: Object.keys(imagesToGenerate) })],
  // optimisation step for image generation (see guide for more opts)
  optimization: {
    minimizer: [
      ...Object.entries(imagesToGenerate).map(([imgSrc, imgConfig]) => {
        const fileType = path.extname(imgSrc).substring(1);
        return new ImageMinimizerPlugin({
          generator: imgConfig.sizes.map((size) => ({
            type: "asset",
            implementation: async (original, options) => {
              const result = await ImageMinimizerPlugin.sharpGenerate(
                original,
                options,
              );
              // files already end up the the configured output path
              // this is to customise the name based on resize config
              const fileExt = path.extname(result.filename);
              result.filename = `${imgConfig.name}_${size}${fileExt}`;
              return result;
            },
            options: {
              // encode option is required so setting max quality for resize
              encodeOptions: {
                [fileType]: {
                  quality: 100,
                },
              },
              resize: {
                enabled: true,
                height: size,
                width: size,
              },
            },
          })),
        });
      }),
    ],
  },
};

代码

https://github.com/webpack-contrib/image-minimizer-webpack-plugin#generate-webp-images-from-copied-assets的指南显示了用于图像转换的sharp

的替代方案。