Ausführliche Erläuterung der Schritte zum Verpacken von Schriftarten mit Webpack

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Verpacken von Font-Awesome mit Webpack. Was sind die Vorsichtsmaßnahmen zum Verpacken von Font-Awesome mit Webpack? .

Bei der Verwendung von Webpack zum Erstellen von Font-Awesome oder Bootstrap ist das Erstellen von Schriftartdateien eines der häufigsten Probleme. Das Problem, dass Schriftartdateien nicht gefunden werden können, tritt häufig auf. Lassen Sie uns darüber sprechen, wie Sie die importierte Schriftartendatei korrekt erstellen:

1. Installieren Sie zunächst die Abhängigkeiten:

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2 font-awesome vorstellen

require('font-awesome-webpack');

3. Webpack.config.js so einstellen, dass Schriftartdateien verarbeitet werden

Hier gibt es zwei Möglichkeiten, wenn Sie dies nicht tun Sie möchten keine separate Schriftartendatei generieren, aber wenn Sie die Schriftartendatei und die CSS-Datei in einer Datei zusammenfassen möchten, können Sie den URL-Loader verwenden und ihn wie folgt festlegen:

  module: {
      rules: [
        // 省略其他配置...
        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader?limit=1000000'
        },
        // 省略其他配置...
      ]
  }

Hier gibt es eine Parameterbegrenzung Wird an den URL-Loader übergeben und auf einen größeren Wert gesetzt. Diese Zahl kann angepasst werden, sie muss jedoch größer als die Größe der größten Schriftartdatei sein, da dieser Parameter dem URL-Loader mitteilt, dass, wenn die Datei kleiner als dieser Parameter ist, Es wird direkt in Form einer Daten-URL in die Datei integriert. Diese Methode ist die bequemste, hat jedoch den Nachteil, dass die erstellten Dateien sehr groß sind und es keine Möglichkeit gibt, die Dateien online zwischenzuspeichern. Eine Online-Bereitstellung wird nicht empfohlen.

Die zweite Methode besteht darin, beim Erstellen das Ausgabeverzeichnis der URL-Loader- oder File-Loader-Datei anzugeben, sodass sich Font-awesome bei der Bereitstellung auf die Schriftartendatei im beim Erstellen angegebenen Verzeichnis verlässt Das Problem, dass die Schriftartdatei nicht gefunden wird, ist nun nicht mehr vorhanden. Die Webpack-Build-Konfiguration lautet wie folgt:

  module: {
  rules: [
    // 省略其他配置...
    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
    },
    // 省略其他配置...
  ]
}

Nachdem das Projekt mit der obigen Konfiguration erstellt wurde, wechselt „font-awesome“ zu „/“. static/res/font/ "Suchen Sie im Verzeichnis nach der angegebenen Schriftartendatei. Gleichzeitig wird in dem von Ihnen erstellten Projekt der entsprechende Schriftartenordner generiert. Sie müssen nur die Schriftartendatei in diesem Schriftartenordner in kopieren „/static/res/font“-Verzeichnis (Wenn publicPath „./“ ist, bedeutet dies, dass Sie sich direkt auf die Schriftartdatei im Build-Verzeichnis verlassen und diese nicht kopieren müssen), sodass Sie beim Zugriff auf Ihre Seite können Sie die Schriftartdatei korrekt anfordern.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Analyse der Schritte zur Verwendung der PopupWindow-Komponente mit Vue

Detaillierte Erläuterung der Schritte zur Implementieren Sie die elektronische Uhrfunktion mit jQuery

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Verpacken von Schriftarten mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!