Webpack を使用してフォント font-awesome をパッケージ化する方法

今回は、Webpack を使用してフォント font-awesome をパッケージ化する方法と、Webpack を使用してフォント 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 サイトの他の関連記事に注目してください。

推奨読書:

Node.js+コンソール出力ログファイルの分析例

Vueを使用してドラッグアンドドロップ効果を実現する方法

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