2

我想从一个基本图像生成不同大小的图像。我有一张 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
            })
        ],
    })
];

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

4

0 回答 0