Detailliertes Beispiel dafür, wie Webpack SVG tatsächlich lädt

In diesem Artikel wird hauptsächlich die eigentliche Methode zum Laden von SVG mit Webpack vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

SVG wird als Standardformat für Vektorgrafiken von den wichtigsten Browsern unterstützt und ist auch zum Synonym für Vektorgrafiken im Web geworden. Die Verwendung von SVG anstelle von Bitmaps in Webseiten hat die folgenden Vorteile:

1. SVG ist klarer als Bitmaps und beeinträchtigt die Klarheit von Grafiken bei willkürlicher Skalierung nicht. SVG kann das Problem effektiv lösen unscharfer Bilddarstellung auf hochauflösenden Bildschirmen.

2. Wenn die grafischen Linien relativ einfach sind, ist die Größe der SVG-Datei kleiner als die der Bitmap. Heutzutage, wenn flache Benutzeroberflächen beliebt sind, ist SVG in den meisten Fällen kleiner.

3. SVG mit den gleichen Grafiken hat eine bessere Renderleistung als die entsprechenden hochauflösenden Grafiken.

4. SVG verwendet eine mit HTML konsistente XML-Syntaxbeschreibung, die sehr flexibel ist.
   

Das Zeichentool kann .svg-Dateien einzeln exportieren. Die Importmethode von SVG ähnelt der von Bildern. Sie kann wie folgt direkt in CSS verwendet werden 🎜>

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

kann auch in HTML verwendet werden:

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

Das heißt, Sie können direkt Verwenden Sie die SVG-Datei als Bild. Die Verwendung ist genau die gleiche wie bei der Verwendung von Bildern. Daher sind die beiden in 3-19 „Laden von Bildern mit File-Loader“ und „URL-Loader“ vorgestellten Methoden für SVG gleichermaßen wirksam. Sie müssen lediglich das Dateisuffix in der Loader-Testkonfiguration in „.svg“ ändern.

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

Da SVG eine Datei im Textformat ist, gibt es neben den beiden oben genannten Methoden noch andere Methoden, die im Folgenden erläutert werden.

Raw-Loader verwenden

Raw-Loader kann den Inhalt der Textdatei lesen und ihn in JavaScript oder CSS einfügen.

Schreiben Sie dies beispielsweise in JavaScript:

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

Der Ausgabecode nach der Raw-Loader-Verarbeitung lautet wie folgt:

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

Das heißt, der Inhalt von SVGContent entspricht SVG in Stringform. Da SVG selbst ein HTML-Element ist, können Sie SVG nach Erhalt des SVG-Inhalts direkt einfügen die Webseite über den folgenden Code:

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

Die relevante Webpack-Konfiguration bei Verwendung des Raw-Loaders lautet wie folgt:

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

Aufgrund von Raw gibt der Loader den Textinhalt von SVG direkt zurück und kann den Textinhalt von SVG nicht über CSS anzeigen. Daher kann SVG nach Verwendung dieser Methode nicht in CSS importiert werden. Das heißt, Code wie „background-image: url(./svgs/activity.svg)“ kann nicht in CSS erscheinen, da „background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948)“ illegal ist .

Dieses Beispiel stellt den vollständigen Code des Projekts bereit

Verwendung des SVG-Inline-Loaders

SVG-Inline-Loader und des erwähnten Raw-Loaders Die oben genannten sind sehr ähnlich, der Unterschied besteht jedoch darin, dass der SVG-Inline-Loader den Inhalt von SVG analysiert und unnötigen Code entfernt, um die Dateigröße von SVG zu reduzieren.

Nachdem Sie Zeichenwerkzeuge wie Adobe Illustrator und Sketch zum Erstellen von SVG verwendet haben, generieren diese Werkzeuge unnötigen Code für die Ausführung der Webseite beim Exportieren. Das Folgende ist beispielsweise der Code des von Sketch exportierten SVG:

<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>

wird nach der Verarbeitung durch den SVG-Inline-Loader wie folgt optimiert:

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

Das heißt, der SVG-Inline-Loader fügt SVG eine Komprimierungsfunktion hinzu.

Die relevante Webpack-Konfiguration bei Verwendung des SVG-Inline-Loaders lautet wie folgt:

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

Dieses Beispiel stellt den vollständigen Code des Projekts bereit

Verwandte Empfehlungen:

Detaillierte Erläuterung der Webpack-Optimierungskonfiguration und des eingeschränkten Dateisuchumfangs mit Beispielen

Detaillierte Erläuterung der Kernkonzepte des Webpack-Frameworks

Detaillierte Erläuterung der Beispiele für die Entwicklung mehrseitiger Webpack+Express-Websites

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie Webpack SVG tatsächlich lädt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!