Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   конвертация в webp (https://javascript.ru/forum/server-tools/80141-konvertaciya-v-webp.html)

fire888 01.05.2020 19:55

конвертация в webp
 
В папке дист почему-то создаются 2 файла: image.png и image.webp вместо одного image.webp
Приложение юзает почему-то image.png

Что не так кто знает? Как на сборке получить результат чтобы использовался формат webp?

Конфиг вебпака:
const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");

module.exports = ()  => {
    return ({
        entry: './src/index.js',
        module: {
            rules: [ {
                    test: /\.(png|jp(e*)g|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8000, // Convert images < 8kb to base64 strings
                            name: 'images/[hash]-[name].[ext]'
                        }
                    }]
                },]
        },
        plugins: [
            new HtmlWebpackPlugin({template: pathToTemplates + 'templates/index.html'}),
            new ImageminWebpWebpackPlugin({
                config: [{
                    test: /\.(jpe?g|png)/,
                    options: {
                        quality:  75
                    }
                }],
                overrideExtension: true,
                detailedLogs: false,
                silent: false,
                strict: true
            }),
        ],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'app.bundle.js'
        },
    })
}


Помогите плиз!!!

destus 01.05.2020 21:25

2 файла создаются потому, что первый (.png) переносится url-loader'ом, второй - ImageminWebpWebpackPlugin плагином.
По поводу того как использовать сгенерированную webp картинку: автор плагина в своем примере в файлах сразу ссылается на нужное расширение https://github.com/iampava/imagemin-...index.html#L13
То есть можно использовать такой же вариант (но нужен fallback на случай не поддержки webp браузером).


Часовой пояс GMT +3, время: 06:34.