Url Loader

11min
il y a 8 ans
Télécharger la vidéo
Résumé Support

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)