Webpack “OTS erreur d'analyse” chargement de polices

TL;DR Utiliser des chemins absolus pour vos biens (y compris votre nom d'hôte) en définissant votre output.publicPath, par exemple "http://example.com/assets/".

Le problème

Le problème est la façon dont les Url sont résolus par le Chrome lorsqu'ils sont analysés à partir d'un chargé dynamiquement CSS blob.

Lors du chargement de la page, le navigateur charge votre Webpack faisceau d'entrée de fichier JavaScript, qui (lorsque vous utilisez la style-loader) contient également une encodées en Base64 copie de votre CSS, qui est chargé dans la page.

C'est à quoi il ressemble dans Chrome DevTools

C'est très bien pour toutes les images ou les polices de caractères qui sont codés dans le CSS de données Uri (c'est à dire le contenu du fichier est incorporé dans le CSS), mais pour les actifs référencés par URL, sur le navigateur pour rechercher et extraire le fichier.

Maintenant, par défaut, le file-loader (qui url-loader délégués pour les gros fichiers) va utiliser relative Url de référence de la fortune et de la c'est ça le problème!

Ce sont les Url générées par file-loader par défaut d'Url relatives

Lorsque vous utilisez des Url relatives, Chrome résoudre par rapport à l'contenant le fichier CSS. Normalement c'est bien, mais dans ce cas, le fichier contenant est à blob://... et toutes les Url relatives sont référencés de la même manière. Le résultat final est que Chrome tente de les charger à partir du parent fichier HTML, et finit par essayer de parser le fichier HTML que le contenu de la police, ce qui évidemment ne fonctionne pas.

La Solution

De la Force de la file-loader utiliser des chemins absolus, y compris le protocole"http" ou "https").

Changer votre webpack config pour inclure quelque chose d'équivalent à:

{
  output: {
    publicPath: "http://localhost:8080/", //Development Server
    //publicPath: "http://example.com/", //Production Server
  }
}

Maintenant l'Url qu'il génère ressemblera à ceci:

Url Absolues!

Ces URLs soient correctement analysés par google Chrome et tous les autres navigateur.

À l'aide de extract-text-webpack-plugin

Il est intéressant de noter que si vous êtes l'extraction de votre CSS dans un fichier séparé, vous n'aurez pas ce problème parce que votre CSS sera dans un bon fichier et Url de résoudre correctement.

Pour moi le problème était ma regex expression. Le ci-dessous fait le tour pour obtenir bootstrap de travail:

{
    test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
    loader: 'url-loader?limit=100000'
},

J'ai eu le même problème, mais pour des raisons différentes.

Après la Volonté Madden solution n'a pas aider, j'ai essayé tous les autre correctif que j'ai pu trouver via les Intertubes - également en vain. En explorant d'autres, j'ai juste arrivé d'ouvrir un des fichiers de police en question. Le contenu original du fichier avait été en quelque sorte remplacé par Webpack d'inclure une sorte de configuration de l'info, probablement à partir d'précédente de bricoler le fichier loader. J'ai remplacé les fichiers corrompus avec les originaux, et voilà, les erreurs ont disparu (pour Chrome et Firefox).

Puisque vous utilisez url-chargeur:

L'url-chargeur fonctionne comme le fichier loader, mais peut retourner un DataURL si le fichier est plus petit qu'une limite d'octets.

Donc une autre solution à ce problème serait de faire de la limite supérieure assez que les fichiers de police sont inclus en tant que DataURL, par exemple à 100000 qui sont plus ou moins 100Kb:

{
  module: {
    loaders: [
      //...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/octet-stream',
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=image/svg+xml',
      },
    ],
  },
}

Toujours en tenant compte de ce que le nombre limite représente:

Limite d'octets de l'inclure des fichiers de Données URL

De cette façon, vous n'avez pas besoin de spécifier l'ensemble de l'URL de l'actif. Ce qui peut être difficile quand vous voulez Webpack non seulement de répondre à partir de localhost.

Juste une dernière considération, cette configuration n'est PAS RECOMMANDÉE pour la production. C'est juste pour le développement de facilité.

À compter de 2018,

use MiniCssExtractPlugin

pour Webpack(> 4.0) permettra de résoudre ce problème.

https://github.com/webpack-contrib/mini-css-extract-plugin

À l'aide de extract-text-webpack-plugin dans l'acceptation réponse est PAS recommandé pour Webpack 4.0+.