Comment empaqueter la police font-awesome à l'aide de Webpack

Cette fois, je vais vous montrer comment utiliser Webpack pour empaqueter la police font-awesome. Quelles sont les précautions pour utiliser Webpack pour empaqueter la police font-awesome. Voici des cas pratiques, prenons un. regarder.

1. Installez d'abord les dépendances :

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

2. Introduisez font-awesome< dans le 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 je veux Le fichier et le fichier CSS sont intégrés dans un seul fichier. Vous pouvez utiliser url-loader. Les paramètres sont les suivants :

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

Ici, une limite de paramètre est transmise à url-loader et définie sur . une valeur plus 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 est plus petit que ce paramètre, il sera intégré directement dans le fichier. fichier sous la forme d’une URL de données. 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.

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 :

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

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.

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 d'un exemple de fichier journal de sortie Node.js+console

Comment utiliser Vue pour obtenir un glissement et déposez des effets

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!