web-dev-qa-db-de.com

Wie konfiguriert man das Ausgabeverzeichnis für Schriftdateien von font-awesome-webpack im webpack?

Ich habe gerade font-awesome-webpack installiert. Ich importiere es mit: require("font-awesome-webpack");

Meine Webpack-Konfiguration enthält Folgendes in meinem Modul-Loader-Array:

    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

Problem ist, dass diese Fehlermeldung in der Entwicklerkonsole angezeigt wird:

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

Das Problem ist, dass diese Dateien im Stammverzeichnis (im Verzeichnis mysite) erstellt werden. Wie kann ich so konfigurieren, dass diese Woffs und ttf im Verzeichnis mysite/app ausgegeben werden?

29
Rolando

Ich wollte kürzlich Font Awesome mit Webpack v1 verwenden. Ich habe das npm-Modul font-awesome Installiert, nicht font-awesome-webpack.

Sie müssen einige Lader installieren, bevor Sie:

npm i css-loader file-loader style-loader url-loader

und addiere sie in deine webpack.config.js:

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }

Wenn Sie nun Folgendes in Ihren entry.js Einfügen:

require('font-awesome/css/font-awesome.css');

Normalerweise können Sie font-awesome in Ihrer Vorlage verwenden:

<i class="fa fa-times"></i>

Diese Gist hat mir geholfen: https://Gist.github.com/Turbo87/e8e941e68308d3b40ef6

39
Vincent Taing

Ab Feb. 2016 scheint dies eine häufige Frage bei webpack zu sein. Wenn Sie dem Lader Folgendes hinzufügen: '&name=./path/[hash].[ext]', gibt dies an, wo nach diesen Dateien gesucht werden soll. Zum Beispiel: 

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}

Dadurch wird die korrekte URL zu den Schriftarten in der generierten CSS-Datei eingefügt.

Ich empfehle diese Methode, wenn Sie mit etwas anderem als css/scss arbeiten. Hoffe das hilft. 

10
Paul

Zusätzlich zu den obigen Antworten musste ich einen Pfad in der Ausgabe angeben, damit er so funktioniert, dass der gehostete Speicherort angegeben wird und die Assets nicht in den Stammpfad geschrieben werden:

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module 
4
user2738707
{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=100000'
}

Dieses Schema hat mir geholfen

2
tonghae

Dies ist mein Fall, da mein Skriptpfad wie folgt aussieht:

    script(src='/javascripts/app.js')

Also muss ich '& name./Javascripts/[hash]. [Ext]' zu allen Fontdateien hinzufügen: 

{
  test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}
1
jadeydi

Nur als Hinweis, ich bin auf einen ähnlichen Fehler gestoßen, als ich den font-awesome-loader verwendet habe.

Um dies zu korrigieren, kann die Option publicPath zur Ausgabe hinzugefügt werden:

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },

Der Ordner/assets/wird dort geändert, wo Sie Ihre Schriftarten tatsächlich speichern.

Hoffentlich hilft das.

1
Shaun Ripley

Ich hatte font-awesome-webpack auf meinem PC, aber auf meinem Mac nicht. Ich glaube, mein PC warf immer noch die 404er für die .woff2, .woff und .tiff, aber die Symbole wurden korrekt angezeigt, so dass ich das Problem ignorierte.

Mein Mac zeigt die Symbole jedoch nicht an. Beim Lesen dieser Fragen und Antworten habe ich einige Dinge ausprobiert. Hier ist was zu meiner Lösung führte:

  1. Auf meiner http: // localhost: 8080/View/ Seite habe ich 404s erhalten, die wie der Link unten aussahen:
  2. Ich habe http: // localhost: 8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 in den Browser eingegeben und die 404 bestätigt.
  3. Ich habe versucht, zu http: // localhost: 8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 zu gehen (den zusätzlichen Pfad vor der Schriftartdatei zu entfernen) und konnte auf die Datei zugreifen.
  4. Ich habe die Antwort von Paul geändert, um den . zu entfernen, der die Dateianforderung relativ gemacht hat.

Zum Beispiel schlug Paul vor:

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}

Beachten Sie den &name-Parameter, der ./[hash].[ext] verwendet. Ich habe den führenden . gelöscht und jetzt gibt es keine 404s (der Browser fordert die Dateien korrekt vom Stamm der Site an):

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}

Fazit: Wenn sich Ihr Einstiegspunkt NICHT im Webstammverzeichnis befindet und Sie auf die Zeichensatzdateien im Webstammverzeichnis zugreifen können, müssen Sie wahrscheinlich nur diese Namenskonfiguration verwenden, um den Pfad zu korrigieren.

0
Michael Lewis

Gleiches Problem. 

Es wurde die folgende Syntax verwendet:

loader: "file?name=./fonts/[hash].[ext]"

fonts ist der Verzeichnisname, ersetzen Sie ihn durch Ihren eigenen Verzeichnisnamen.

Beispiel:

{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}
0
john sam