Come configurare la directory di output dei file dei font da font-awesome-webpack nel webpack?

Question

Ho appena installato font-awesome-webpack. I importare utilizzando: require("font-awesome-webpack");

mio webpack config include quanto segue nella mia gamma caricatori modulo:

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

problema è che sto ottenendo questo errore in console sviluppatore:

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) 

Il problema è , quei file sono creati nella radice (all'interno della directory mysite). Come posso configurare in modo tale che quei woff e ttf vengano visualizzati nella directory mysite/app?

Answer 1

Recentemente ho voluto utilizzare font di impressionante con webpack v1, ho installato il modulo NPM font-awesome non font-awesome-webpack

È necessario installare alcuni caricatori prima:

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

e aggiungere l'uso nelle vostre 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" 
    }] 
    } 

Ora, se si includono nel vostro entry.js:

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

Normalmente in grado di utilizzare font-impressionante nel modello:

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

Questa sostanza mi ha aiutato: https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

Answer 2

A partire dal febbraio 2016 questo sembra essere una domanda comune con il webpack, quindi spero che questo aiuti. Se lo aggiungi al caricatore: '&name=./path/[hash].[ext]', che specifica dove cercare quei file. Ad esempio:

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

Questo inserisce l'URL corretto per i caratteri all'interno del file CSS generato.

Raccomando questo metodo quando si tratta di qualcosa di diverso da css/scss. Spero che questo ti aiuti.

Answer 3

Oltre alle risposte di cui sopra, ho ho dovuto specificare un percorso in uscita per farlo funzionare in questo modo per specificare la posizione ospitato e non scrivere i beni al percorso principale:

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 

Answer 4

Questo è il mio caso, a causa della mia percorso dello script è come di seguito:

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

Quindi, devo aggiungere '& name./javascripts/[hash].[Ext]' a tutti i file di font come:

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

Answer 5

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

Questo schema mi ha aiutato

Answer 6

ho avuto font-awesome-webpack lavorare sul mio PC, ma non avrebbe funzionato sul mio Mac. Penso che il mio PC stia ancora lanciando gli 404 per il .woff2, .woff e .tiff, ma le icone sono state visualizzate correttamente, quindi ho ignorato il problema.

Il mio Mac, tuttavia, non visualizza le icone. Durante la lettura di questo Q & A, ho provato un sacco di cose. Ecco cosa portare a mia soluzione:

1. sulla mia pagina http://localhost:8080/View/, mi è stato sempre 404s che sembravano sul link qui sotto:
2. entrai http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 nel browser, e confermato l'404.
3. Ho provato ad andare a http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (rimuovendo il percorso extra prima del file di carattere), ed è stato in grado di accedere al file.
4. Ho modificato la risposta di Paolo per rimuovere lo . che ha reso relativa la richiesta di file.

Per esempio, Paul ha suggerito:

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

Prendere nota del parametro &name, che utilizza ./[hash].[ext]. Ho lasciato cadere il principale . e ora non ci sono 404s (il browser richiede correttamente i file dalla radice del sito):

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

Conclusione: se il punto di ingresso non è a vostra web root, e tu sei in grado di accedere ai file dei font nella root Web, probabilmente è sufficiente utilizzare questa configurazione del nome per correggere il percorso.

Answer 7

Stesso problema affrontato.

fisso utilizzando la sintassi di seguito,

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

font è il nome della directory, sostituirlo con il proprio nome di directory.

Esempio:

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

Answer 8

Proprio come una nota, mi sono imbattuto in un errore simile utilizzando il font-awesome-loader. Dove la directory non sarebbe stata impostata correttamente, indipendentemente da una qualsiasi delle modifiche precedenti.

per correggere questo, l'opzione publicPath può essere aggiunto alla uscita:

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

La cartella/attività/sarà cambiato ovunque effettivamente memorizzare i font.

Speriamo che questo aiuti.