So verpacken Sie die Schriftart „font-awesome“ mit Webpack

Dieses Mal zeige ich Ihnen, wie Sie Webpack zum Verpacken der Schriftart „font-awesome“ verwenden sehen.

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

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

2. Fügen Sie „font-awesome“

in die Eintragsdatei

require('font-awesome-webpack');

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

Hier gibt es zwei Möglichkeiten, wenn Sie Schriftartdateien nicht separat generieren möchten, dies aber tun möchten Kombinieren Sie Schriftartdateien und CSS-Dateien. Um sie in eine Datei einzubauen, 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 wird ein Parameterlimit an den URL-Loader übergeben und auf einen größeren Wert gesetzt Die Anzahl kann angepasst werden, sie muss jedoch größer sein als die Größe der maximalen Schriftartdatei, da dieser Parameter dem URL-Loader mitteilt, dass, wenn die Datei kleiner als dieser Parameter ist, sie direkt in Form von Daten in die Datei eingebaut wird URL. 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:

Node.js+console-Ausgabeprotokolldatei-Beispielanalyse

Wie man Vue verwendet, um Drag zu erreichen und Drop-Effekt

Das obige ist der detaillierte Inhalt vonSo verpacken Sie die Schriftart „font-awesome“ mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!