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

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. 

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 

{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=100000'
}

Dieses Schema hat mir geholfen

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]"
}

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.

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.

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