font-awesome フォント パッケージングの使用例の分析 (コード付き)

今回は font-awesome フォント パッケージングの使用事例分析 (コード付き) をお届けします。font-awesome フォント パッケージングを使用する際の 注意事項 は何ですか。以下は実際的なケースです。見てみましょう。

1. まず依存関係をインストールします:

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

2. エントリーファイルに font-awesome を導入します

3. フォントファイルを処理するために webpack.config.js を設定します

ここでは 2 つの方法があります。フォント ファイルを個別に生成したくないが、フォント ファイルと CSS ファイルを 1 つのファイルにビルドしたい場合は、url-loader を使用して次のように設定できます:

require('font-awesome-webpack');

ここで、パラメータ制限は次のとおりです。 url-loader に渡され、「比較的大きい」に設定されると、この数値はカスタマイズできますが、最大のフォント ファイルのサイズより大きくする必要があります。これは、このパラメータが url-loader に、ファイルがこのパラメータより小さい場合は、フォント ファイルが小さいことを通知するためです。データ URL の形式でファイルに直接組み込まれます。この方法は最も便利ですが、構築されたファイルが非常に大きく、オンライン時に CDN を使用してファイルをキャッシュする方法がないという欠点があります。オンラインでの展開はお勧めできません。

2 番目の方法は、ビルド時に url-loader または file-loader のファイルの出力ディレクトリを指定することで、デプロイ時に font-awesome はビルド時に指定されたディレクトリ内のフォント ファイルに依存し、検索は行われません。フォントファイルの問題はなくなりました。現時点での webpack のビルド構成は次のとおりです。

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

上記の構成でプロジェクトをビルドした後、font-awesome は「/static/」で指定されたフォント ファイルを検索します。 res/font/" ディレクトリに追加され、同時に、ビルドするプロジェクト内に対応するフォント フォルダーが生成されます。このフォント フォルダー内のフォント ファイルを "/static/res/font" ディレクトリにコピーするだけです ( publicPath が "./" の場合は、ビルド ディレクトリ内のフォント ファイルに直接依存していることを示します (コピーする必要はありません)。これにより、ページにアクセスするときにフォント ファイルを正しくリクエストできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueインターセプタ互換処理

コンソールにログ情報を出力する方法

jQueryはマウスバインディングイベント画像拡大機能を実装

以上がfont-awesome フォント パッケージングの使用例の分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。