web-dev-qa-db-fra.com

Comment configurer le répertoire de sortie du fichier de police à partir de font-awesome-webpack dans webpack?

Je viens d'installer font-awesome-webpack. Je l'importe en utilisant: require("font-awesome-webpack");

Mon config webpack inclut les éléments suivants dans mon tableau de chargeurs de modules:

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

Le problème est que je reçois cette erreur dans la console du développeur:

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)

Le problème est que ces fichiers sont créés à la racine (dans le répertoire mysite). Comment configurer de telle sorte que ces woffs et ttf soient sortis dans le répertoire mysite/app?

javascriptfont-awesomewebpack
29
Rolando

Depuis février 2016, cela semble être une question courante avec Webpack. J'espère donc que cela vous aidera. Si vous ajoutez ceci au chargeur: '&name=./path/[hash].[ext]', cela spécifie où chercher ces fichiers. Par exemple: 

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

Cela place l'URL correcte des polices dans le fichier CSS généré.

Je recommande cette méthode lorsque vous travaillez avec autre chose que css/scss. J'espère que cela t'aides. 

10
Paul

En plus des réponses ci-dessus, I Je devais spécifier un chemin d'accès en sortie pour le faire fonctionner de la sorte, de manière à spécifier l'emplacement hébergé et ne pas écrire les actifs dans le chemin racine:

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

Ce schéma m'a aidé

2
tonghae

C'est mon cas, à cause de mon chemin de script est comme ci-dessous:

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

Donc, je dois ajouter '& name./Javascripts/[hash]. [Ext]' à tous les fichiers de polices comme: 

{
  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

En guise de remarque, je suis tombé sur une erreur similaire en utilisant font-awesome-loader ..__ où le répertoire ne serait pas correctement défini, quelles que soient les modifications ci-dessus.

Pour corriger cela, l'option publicPath peut être ajouté à la sortie:

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

Le dossier/ressources/sera remplacé par l'emplacement où vous stockez réellement vos polices.

Espérons que cela aide.

1
Shaun Ripley

font-awesome-webpack fonctionnait sur mon PC, mais cela ne fonctionnerait pas sur mon Mac. Je pense que mon PC lançait toujours les 404 pour les fichiers .woff2, .woff et .tiff, mais les icônes s’affichent correctement et j’ignore donc le problème.

Mon Mac, cependant, n’affiche pas les icônes. En lisant ce Q & A, j'ai essayé beaucoup de choses. Voici ce qui a conduit à ma solution:

  1. Sur ma http: // localhost: 8080/View/ page, je recevais des 404 ressemblant au lien ci-dessous:
  2. J'ai entré http: // localhost: 8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 dans le navigateur et confirmé la 404.
  3. J'ai essayé d'aller à http: // localhost: 8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (en supprimant le chemin supplémentaire avant le fichier de police) et j'ai pu accéder au fichier.
  4. J'ai modifié la réponse de Paul pour supprimer le . qui rendait la demande de fichier relative.

Par exemple, Paul a suggéré:

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

Prenez note du paramètre &name, qui utilise ./[hash].[ext]. J'ai laissé tomber le . en tête et maintenant il n'y a plus de 404 (le navigateur demande correctement les fichiers à la racine du site):

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

Conclusion: si votre point d'entrée N'EST PAS à la racine Web et que vous pouvez accéder aux fichiers de polices à la racine Web, il vous suffit probablement d'utiliser cette configuration de nom pour corriger le chemin.

0
Michael Lewis

Même problème rencontré. 

Corrigé en utilisant la syntaxe ci-dessous,

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

polices est le nom du répertoire, remplacez-le par votre propre nom de répertoire.

Exemple:

{ 
  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