Webpack ne peut pas analyser les polices fontello

Question

J'utilise une police d'icônes personnalisée, créée avec fontello. Lorsque j'essaie de l'utiliser dans webpack, j'obtiens l'erreur suivante :

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default-
frontend-setup/ida-ida-default-frontend-setup-
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)

Et il le fait pour woff(2), ttf, svg... tous. J'ai utilisé plusieurs solutions trouvées sur SOF, mais aucune d'entre elles ne semble fonctionner.

Voici mon webpack.config.js:

module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            { test: /\.css$/, loader: "style!css!" },
        { test: /\.scss$/, loader: "style!css!sass!" },


        { test: /\.(woff|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'},


    ]
}

Quelqu'un a-t-il des idées sur celui-ci ?

Merci!

Cordialement

Mario

fonts webpack fontello

1

MarioVde 11 juil. 2016 à 10:16

Answer 1

Astuce : n'utilisez pas de formats de polices qui n'existent plus, donc pas de polices eot ou svg, et puisque WOFF est littéralement un wrapper octet par octet autour de ttf/otf, pas de ttf/otf si vous avez déjà WOFF. Cela résout un problème : la complexité.

Maintenant, avec ce format de police unique : ne regroupez pas cela. Ne regroupez pas les actifs statiques dans un ensemble javascript, laissez le navigateur les charger, avec une mise en cache appropriée, une prévention de chargement 304, etc. Les regrouper signifie que vous gaspillez des tonnes de bande passante chaque fois que quelqu'un charge votre forfait pour des données qui n'ont jamais changé. Avez-vous modifié du code, mais vos ressources statiques sont restées les mêmes ? Bonne nouvelle, votre pack va maintenant être retéléchargé dans son intégralité. Cela fait perdre du temps à vos utilisateurs, votre bande passante et potentiellement vos dollars bien réels en raison des coûts d'hébergement.

Gardez vos ressources statiques hors de votre bundle, faites de la police une règle CSS @font-face normale. Tout ira bien, il se chargera bien, il se mettra en cache et les chargements suivants seront beaucoup plus rapides et n'auront pas besoin d'accéder à votre serveur pour retransférer le fichier de police.

2

Mike 'Pomax' Kamermans 18 sept. 2019 à 20:56

Answer 2

Eh bien, j'avais également le même problème l'autre jour et j'ai trouvé une solution dans la liste des problèmes de moins de chargement, cela était dû à la fin "? 234234234" dans l'URL de la police,

Essayez ceci dans la configuration du chargeur Webpack :

test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/

J'espère que si vous (ou quelqu'un) rencontrez toujours les problèmes, cela pourrait vous aider. fil original de la solution dans git

1

dhirajbasukala 8 déc. 2016 à 09:01

Webpack ne peut pas analyser les polices fontello

2 réponses

Questions connexes

De nouvelles questions

fonts