Exemple détaillé de la façon dont Webpack charge réellement SVG

Cet article présente principalement la méthode réelle de chargement de SVG avec Webpack. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

SVG, en tant que format standard pour les graphiques vectoriels, est pris en charge par les principaux navigateurs et est également devenu synonyme de graphiques vectoriels sur le Web. L'utilisation de SVG au lieu de bitmaps dans les pages Web présente les avantages suivants :

1. SVG est plus clair que les bitmaps et ne détruira pas la clarté des graphiques sous une mise à l'échelle arbitraire. SVG peut faciliter la résolution efficace du problème. d'affichage d'images peu claires sur les écrans haute résolution.

2. Lorsque les lignes graphiques sont relativement simples, la taille du fichier SVG est plus petite que le bitmap Aujourd'hui, lorsque l'interface utilisateur plate est populaire, SVG sera plus petit dans la plupart des cas.

3. SVG avec les mêmes graphiques a de meilleures performances de rendu que les graphiques haute définition correspondants.

4. SVG utilise une description de syntaxe XML cohérente avec HTML, qui est très flexible.
   

L'outil de dessin peut exporter les fichiers .svg un par un. La méthode d'importation du SVG est similaire à celle des images. Elle peut être utilisée directement en CSS comme suit :

body {
 background-image: url(./svgs/activity.svg);
}

peut également être utilisé en HTML :

<img src="./svgs/activity.svg"/>

C'est-à-dire que vous pouvez directement utilisez le fichier SVG comme image. L'utilisation est exactement la même que pour l'utilisation d'images. Par conséquent, les deux méthodes présentées dans 3-19 Chargement d'images à l'aide du chargeur de fichiers et de l'utilisation du chargeur d'url sont également efficaces pour SVG. Il vous suffit de changer le suffixe du fichier dans la configuration de test du chargeur en .svg.

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg/,
    use: ['file-loader']
   }
  ]
 },
};

Puisque SVG est un fichier au format texte, il existe d'autres méthodes en plus des deux méthodes ci-dessus, qui sont expliquées ci-dessous.

Utiliser raw-loader

raw-loader peut lire le contenu du fichier texte et l'injecter dans JavaScript ou CSS.

Par exemple, écrivez ceci en JavaScript :

import svgContent from './svgs/alert.svg';

Le code de sortie après le traitement du chargeur brut est le suivant :

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 内容

C'est-à-dire que le contenu de svgContent est égal à SVG sous forme de chaîne. Puisque SVG lui-même est un élément HTML, après avoir obtenu le contenu SVG, vous pouvez directement insérer le SVG dans. la page Web via le code suivant :

window.document.getElementById('app').innerHTML = svgContent;

La configuration Webpack pertinente lors de l'utilisation de raw-loader est la suivante :

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['raw-loader']
   }
  ]
 }
};

En raison de raw- Le chargeur renverra directement le contenu texte de SVG et ne pourra pas afficher le contenu texte de SVG via CSS. Par conséquent, SVG ne peut pas être importé dans CSS après avoir utilisé cette méthode. C'est-à-dire qu'un code tel que background-image: url(./svgs/activity.svg) ne peut pas apparaître en CSS, car background-image: url() est illégal. .

Cet exemple fournit le code complet du projet

Utilisation de svg-inline-loader

svg-inline-loader et le raw-loader mentionné ci-dessus sont très similaires, mais la différence est que svg-inline-loader analysera le contenu de SVG et supprimera le code inutile pour réduire la taille du fichier SVG.

Après avoir utilisé des outils de dessin tels qu'Adobe Illustrator et Sketch pour créer du SVG, ces outils généreront du code inutile pour que la page Web s'exécute lors de l'exportation. Par exemple, voici le code du SVG exporté par Sketch :

<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
   stroke="#000">
 <circle cx="12" cy="12" r="10"/>
</svg>

sera rationalisé comme suit après avoir été traité par svg-inline-loader :

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>

C'est-à-dire que svg-inline-loader ajoute une fonction de compression au SVG.

La configuration Webpack pertinente lors de l'utilisation de svg-inline-loader est la suivante :

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['svg-inline-loader']
   }
  ]
 }
};

Cet exemple fournit le code complet du projet

Connexe Recommandé :

Explication détaillée de la configuration de l'optimisation de Webpack et de la portée de recherche de fichiers restreinte avec des exemples

Explication détaillée des concepts de base de Framework Webpack

Explication détaillée des exemples de développement de sites multipages webpack+express

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!