Optimiser les images avec Webpack

Le loader img-loader permet d'optimiser les images.

Pour utiliser img-loader vous devez installer imagemin.

npm install imagemin

Exemple d'utilisation :

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
   'url-loader?limit=10000',
   {
     loader: 'img-loader',
     options: {
       plugins: [
         require('imagemin-gifsicle')({
           interlaced: false
         }),
         require('imagemin-mozjpeg')({
           progressive: true,
           arithmetic: false
         }),
         require('imagemin-pngquant')({
           floyd: 0.5,
           speed: 2
         }),
         require('imagemin-svgo')({
           plugins: [
             { removeTitle: true },
             { convertPathData: false }
           ]
         })
       ]
     }
   }
 ]
}

Remarque : url-loader permet d'encoder en base64 directement dans les fichiers css les ressources en fonction de leur taille.