web-dev-qa-db-fra.com

WebPack - Comment convertir JPG / PNG en WebP via Image-WebPack-Loader

Je veux générer des fichiers WebP à partir de JPG/PNG de WebPack. Pour faire cela, j'utilise image-webpack-plugin (https://github.com/tcoopman/image-webpack-loader)

Dans la documentation du plug-in, il est écrit que l'optimiseur supplémentaire WebP "Compressez les images JPG & Png dans WebP" ( https://github.com/tcoopman/image-webpack-loader# Utilisation ) Mais après avoir suivi les étapes de la documentation, la conversion ne fonctionne pas.

Les fichiers sont exportés dans JPG mais rien n'est converti.

J'ai déjà suivi ces messages mais je ne comprends pas comment traduire dans un environnement "non réagieux":

  1. WebPack ImageMin Plugin pour compresser JPG, PNG et Créer WebP?

  2. WebPack (Encore): Convertissez des images en WebP à l'aide de Image-WebPack-Loader

webpack.config.js

 { 
   test:/\.(gif|png|jpe?g|svg)$/i,
   use:[ 
      { 
         loader:'file-loader',
         options:{ 
            outputPath:'images',
            name:'[name].[ext]'
         }
      },
      { 
         loader:'image-webpack-loader',
         options:{ 
            mozjpeg:{ 
               progressive:true,
               quality:65
            },
            optipng:{ enabled: false },
            pngquant:{ quality: [ 0.65, 0.90 ], speed:4 },
            gifsicle:{ interlaced: false },
            webp:{ quality: 75 }
         }
      }
   ]
}

Y a-t-il un moyen fiable et propre pour activer les fichiers JPG/PNG en WebP via WebPack?

javascriptwebpackwebpwebpack-file-loader
6
PedroZorus

Essaye ça. https://github.com/gaoyyyang/image-optimize-loader#3-transform-Your-pngjpg-into-webp

Lorsque vous activez Compress.WebP, il transformera votre PNG/JPG en fichiers WebP, et il n'y aura pas de fichiers PNG/JPG générés. Votre code source utilisera directement un fichier WebP au lieu de PNG/JPG.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp|git|svg|)$/i,
        use: [
          {
            loader: `img-optimize-loader`,
            options: {
              compress: {
                // This will transform your png/jpg into webp.
                webp: true,
                disableOnDevelopment: true
              }
            },
          },
        ],
      },
    ],
  },
};
0
GaoYYYang