Webpack 5 – Gestion des Assets / Optimisation des images

par

source: https://webpack.js.org/guides/asset-modules/

Les assets Modules sont un type de module qui permet d’utiliser des fichiers d’assets (images, polices, icônes, etc.) sans configurer de chargeurs supplémentaires.

Avant Webpack 5, il était courant d’utiliser:

  • raw-loader pour importer un fichier sous forme de chaîne
  • url-loader pour insérer un fichier dans le bundle en tant qu’URI de données
  • file-loader pour émettre un fichier dans le répertoire de sortie

Les asset Modules remplacent tous ces chargeurs en ajoutant 4 nouveaux types de modules:

  • asset/resource émet un fichier séparé et exporte l’URL. Auparavant réalisable en utilisant file-loader.
  • asset/inline exporte un URI de données de l’asset. Auparavant réalisable en utilisant url-loader.
  • asset choisit automatiquement entre l’exportation d’un URI de données (asset/inline) et l’émission d’un fichier séparé (asset/resource). Auparavant réalisable en utilisant url-loader avec une limite de taille de l’asset.
  • asset/source intègre sans aucune transformation le code source de l’asset. Auparavant réalisable en utilisant raw-loader.

asset/resource

Emet un fichier séparé et exporte l’URL. Par défaut, les asset/resource modules émettent avec le [hash][ext][query]nom de fichier dans le répertoire de sortie.

Vous pouvez modifier ce modèle en définissant output.assetModuleFilename dans votre configuration Webpack. Il est configurable via un template strings.

Il convient d’ajouter ceci dans webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: '/images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
}

Il est également possible de spécifier un dossier de destination pas extension testée:

  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
     },
     {
       test: /\.html/,
       type: 'asset/resource',
       generator: {
         filename: 'static/[hash][ext][query]'
       }
     }
    ]
  }

asset/inline

Exporte un URI de données de l’asset.

webpack.config.js

  module: {
    rules: [
      {
       test: /\.svg/,
       type: 'asset/inline'
     }
    ]
  }

La donnée de l’asset est encodée en utilisant algorithme Base64 et injectée dans une URL.

 import metroMap from './images/metro.svg'
 block.style.background = `url(${metroMap})` // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=)

Il est possible d’utiliser un algorithme d’encodage personnalisé en spécifiant une fonction personnalisée pour encoder le contenu d’un fichier. Par exemple le module mini-svg-data-uri convertit les SVGs en une donnée plus compact qu’une version Base64.

const path = require('path')
const svgToMiniDataURI = require('mini-svg-data-uri')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.svg/,
        type: 'asset/inline',
        generator: {
          dataUrl: content => {
          content = content.toString()
          return svgToMiniDataURI(content)
          }
        }
      }
    ]
  },
}

asset

Webpack choisit automatiquement entre asset/ressource et asset inline (fichier inférieur à 8kb). Il est possible de changer cette condition en configurant Rule.parser.dataUrlCondition.maxSize.

  module: {
    rules: [
      {
        test: /\.txt/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        }
      }
    ]
  },

asset/source

Intègre sans aucune transformation le code source de l’asset.

  module: {
    rules: [
      {
        test: /\.txt/,
        type: 'asset/source',
      }
    ]
  },

Optimisation des images

Utilisation du plugin ImageMinimizerWebpackPlugin.

Laisser un commentaire