Formation Comprendre Webpack : Url Loader

Par défaut le css-loader que l'on a utilisé va chercher à résoudre à travers webpack les fichiers chargé via des @import et des url(). Il va donc falloir indiquer, à travers notre configuration, comment gérer les fichiers images et les polices. On pourra aussi appliquer un loader pour optimiser les fichiers.

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'file-loader'
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '[name].[hash:7].[ext]'
        }
      }, 
      {
        loader: 'img-loader',
        options: {
          enabled: !dev
        }
      }
    ]
  }

On utilise ici 3 loaders :

• file-loader va déplacer le fichier dans le dossier output et créer le bon chemin pour y accéder.
• url-loader va agir comme le file-loader, à un détail prêt. Si le fichier est suffisamment petit alors il sera directement inclue dans le CSS sous format d'url base64.
• img-loader permettra d'optimiser les images avec différents outils (on pensera à désactiver ce loader lorsque l'on est en développement grâce à l'option enabled)