Webpack を使用してフォント font-awesome をパッケージ化する手順の詳細な説明

今回は、Webpack で font-awesome をパッケージ化する手順について詳しく説明します。Webpack で font-awesome をパッケージ化する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

webpack を使用して font-awesome または

bootstrap をビルドする場合、最も一般的な問題の 1 つはフォント ファイルのビルドの問題です。フォントファイルが見つからないという問題がよく発生します。インポートされたフォント ファイルを正しく構築する方法について説明します。

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

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

を エントリー ファイルに導入します 3. Webpack を設定します。 config.js フォント ファイルを個別に生成したくないが、フォント ファイルと CSS ファイルを 1 つのファイルにビルドしたい場合は、url-loader を使用する方法が 2 つあります。

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 サイトの他の関連記事に注目してください。

推奨読書:

PopupWindowコンポーネントのVue実装のステップバイステップ分析

電子時計関数のjQuery実装の詳細な説明

以上がWebpack を使用してフォント font-awesome をパッケージ化する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。