Url-chargeur vs File-loader Webpack

Question

J'essaie de comprendre la différence entre url-chargeur vs chargeur de fichiers. Qu'est-ce `` que ça veut dire ?

Le chargeur d'url fonctionne comme le chargeur de fichiers, mais peut renvoyer un DataURL si le fichier est plus petit qu'une limite d'octet.

Answer 1

``codera les fichiers à base64 et les inclura en ligne plutôt que de les charger comme fichiers distincts avec une autre demande.

Un fichier codé base64 peut ressembler à ceci :

Cela serait ajouté à votre paquet.

Answer 2

Voulais juste ajouter à Jens' anwer

file-loader permettra de copier des fichiers vers le dossier de création et d'insérer des liens vers eux, où ils sont inclus. url-loader encoder le fichier en entier d'octets de contenu en base64 et insérez base64 content où ils sont inclus. Donc, il n'existe pas de fichier séparé.

Ils sont principalement utilisés pour des ressources multimédias tels que des images. La plupart des images.

Cette technique peut faire du chargement de la page plus rapidement, car il y a moins de http demandes vers le serveur de téléchargement de fichiers.

Il est également important que vous pouvez spécifier la limite de taille pour url-loader. Il va revenir automatiquement à l' file-loader pour tous les fichiers au-delà de cette taille:

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192 // in bytes
        }
    }]
}