Font Awesomeをwebpackに読み込んでくれるnpmパッケージ

fontawesomeをwebpackに

Font Awesomeを読み込むにはどうすればいいか

Webサイトやアプリのユーザビリティ向上には欠かすことのできないアイコン。

その中でもアイコンをフォント形式で読み込み、表示してくれるFont AwesomeはWeb製作の上で必須サービスとなっているのではないでしょうか。

今回、最近流行りにのって使い始めたwebpackでFont Awesomeを組み込むにはどうしたらいいのか、手探りながら試してみました。(webpack2.0以上を使用)

font-awesome-webpackを使う

結論から言うと、「font-awesome-webpackを使う」です。こんなありがたいものを公開してくれている人がいました。感謝です。

npm: font-awesome-webpack

Font Awesomeを使うための基本的な設定を記述してくれています。これをnpmでインストールします。

必要となるnpmモジュール

  • font-awesome
  • font-awesome-webpack
  • style-loader (※font-awesome-webpackの依存関係でインストールされる)
  • css-loader (※同上)
  • less-loader (※同上)
  • url-loader
  • file-loader
  • less

style-loaderとcss-loader、さらにless-loaderについては、font-awesome-webpackの依存関係で指定しなくてもインストールされますが、念のため。

// ついでにfont-awesome本体もインストール
$ npm install --save-dev font-awesome font-awesome-webpack url-loader file-loader style-loader css-loader less-loader

// font-awesomeのlessファイルを使っているのでlessがお使いの環境にインストールされていないようであればインストールしましょう
$ npm install --save-dev less

loader記述部分でフォントファイルの読み込みを設定

webpack.config.jsのloader部分に、フォントファイル一式(.woff, .woff2, .eot, .ttf, .svg)をwebpackに読み込ませるよう記述します。

同時に読み込むファイル形式も追加します。

// webpack.config.js

// fontファイル形式を追加
resolve: {
  extensions: ['.js', '.coffee', '.webpack.js', '.web.js', '.scss', '.woff', 'woff2', '.ttf', '.eot', '.svg']
},

// loader記述部分
module: {
  rules: [
    { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
    { test: /\.(ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file-loader" }
  ]
}

使いたいアイコンを限定したりなども可能ですが、設定するのも面倒くさいので(爆)、すべて使用することにします。その際は、エントリーポイントとなるJavaScriptファイルでfont-awesome-webpackを呼び出すだけです。

// main.js
import "font-awesome-webpack";

これでwebpackコマンドを実行すると、フォントファイルが書き出され、HTML上でwebフォントとしてFont Awesomeアイコンが使えるようになります。

fontawesomeをwebpackでつかう

フォントファイルの読み込みエラーが出たので

上述のとおり作業し終わって、いざサイトをブラウザで開いてみると、読み込みエラーが出て、webフォントが読み込まれていませんでした。

コンソールで確認してみると、読み込み先が「localhost/フォントファイル名」のroot直下になっています。しかし、webpackによってフォントファイルが書き出されたのは「assets」ディレクトリ以下(あくまでも自分の設定下では。ここはoutput.pathで指定)です。

publicPathを設定する

上述の読み込みエラーは、webpack.config.jsのoutputにpublicPathを設定することで修正できました。

output: {
  // ファイルの書き出し先
  path: path.join(__dirname, "assets"),
  // 外部ファイルの読み込み先の指定
  publicPath: "/assets/"
}

(Visited 4,599 times, 1 visits today)

“Font Awesomeをwebpackに読み込んでくれるnpmパッケージ” への2件の返信

コメントは受け付けていません。