Explication détaillée des étapes pour empaqueter font-awesome avec Webpack

Cette fois, je vais vous donner une explication détaillée des étapes pour packaging font-awesome avec Webpack Quelles sont les précautions pour packaging font-awesome avec Webpack Voici des cas pratiques, jetons un coup d'oeil. .

Lors de l'utilisation de webpack pour créer font-awesome ou bootstrap, l'un des problèmes les plus courants est celui de la création de fichiers de polices. Le problème de l’impossibilité de trouver les fichiers de polices se produit souvent. Parlons de la façon de construire correctement le fichier de police importé :

1. Installez d'abord les dépendances :

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. fichier d'entrée

require('font-awesome-webpack');

3. Configurez webpack.config.js pour traiter les fichiers de polices

Il existe deux manières ici, si vous ne souhaitez pas générer de fichiers de polices séparément, mais souhaitez créer des fichiers de polices et des fichiers CSS dans un seul fichier, vous pouvez utiliser url-loader. Les paramètres sont les suivants :

Ici, une limite de paramètre est transmise au chargeur d'URL et la définit de manière relativement grande. Ce nombre peut être personnalisé, mais il doit être supérieur à la taille du plus grand fichier de police, car ce paramètre indique au chargeur d'URL que si le fichier de police est le plus grand. est plus petit que ce paramètre, il sera intégré directement dans le fichier sous la forme de Data Url . Cette méthode est la plus pratique, mais l'inconvénient est que les fichiers créés sont très volumineux et qu'il n'est pas possible d'utiliser CDN pour mettre les fichiers en cache en ligne. Il n'est pas recommandé de déployer en ligne.

  module: {
      rules: [
        // 省略其他配置...
        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader?limit=1000000'
        },
        // 省略其他配置...
      ]
  }

La deuxième méthode consiste à spécifier le répertoire de sortie du fichier url-loader ou file-loader lors de la construction, de sorte que lors du déploiement, font-awesome s'appuie sur le fichier de police dans le répertoire spécifié lors de la construction, et Il n'y aura plus de problème de ne pas trouver de fichiers de polices. À ce stade, la configuration de construction du webpack est la suivante :

Après le projet construit avec la configuration ci-dessus, font-awesome ira dans " /static/res/ Recherchez le fichier de police spécifié dans le répertoire "font/", et en même temps, le dossier de polices correspondant sera généré dans le projet que vous construisez. Il vous suffit de copier le fichier de police dans ce dossier de polices. dans le répertoire "/static/res/font" (si publicPath est "./", cela signifie que vous vous appuyez directement sur le fichier de police dans le répertoire de construction, il n'est donc pas nécessaire de le copier), de sorte que lorsque vous visitez votre page, vous pouvez demander correctement le fichier de police.

  module: {
  rules: [
    // 省略其他配置...
    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
    },
    // 省略其他配置...
  ]
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse des étapes pour utiliser Vue pour implémenter le composant PopupWindow

Explication détaillée des étapes pour implémenter la fonction horloge électronique avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!