Webpack 4 - генерировать адаптивные изображения - PullRequest
Новая
       23

Webpack 4 - генерировать адаптивные изображения

0 голосов
/ 27 февраля 2019

Я хочу генерировать изображения разных размеров из одного базового изображения.Например, у меня есть изображение 1920x1080, и после обработки мне нужны изображения с размерами (768, 1024, 1600, 1920).

Я знаю, что есть загрузчик, который может выполнить это: https://github.com/herrstucki/responsive-loader

Однако у меня есть много скриптов вида «устаревшего» PHP-приложения (Zend Framework 3), которые не обрабатываются веб-пакетом (без 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
            })
        ],
    })
];

Эта конфигурация преобразует мои изображения до размеров, удобных для веб-сайтов (с точки зрения размера файла!).Есть ли шанс интегрировать процесс создания изображений нескольких размеров (с точки зрения размеров!) В эту конфигурацию?

...