webpackにfont-awesomeを読み込ませる方法を調べたところ、以下の3つの方法がありました。
最初の方法が一番良さそうですが、今回はフロントエンドに疎く簡単な一番最後の方法を採用しました。
webpack.config.jsにfont-awesomeの設定を記載する
こちらのgistを参考にすると良さそうです。gistが長いためURLのみ載せます。
Justineo/vue-awesome
以下のようにコンポーネントのようなイメージでfont-awesomeを利用できるモジュールです。
ただ、今回の場合は既存のソースで fa-xx などが少なからずあることから、書き換えコストを考えて採用しませんでした。
<!-- basic -->
<icon name="beer"></icon>
<!-- with options -->
<icon name="refresh" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-fork" label="Forked Repository"></icon>
<!-- stacked icons -->
<icon label="No Photos">
<icon name="camera"></icon>
<icon name="ban" scale="2" class="alert"></icon>
</icon>
gowravshekar/font-awesome-webpack
betaということとあまりメンテされてないため積極的に導入したくないですが、今回はこちらを利用してみました。
モジュールの内容としては1.の方法を隠蔽してくれているようなモジュールだと思います。
font-awsomeを利用するために必要なのは次の2つの作業だけです。
npm install --save font-awesome font-awesome-webpack url-loader
url-loaderをインストールしていないと npm run dev の際に以下のエラーがはかれるため先に入れておきます。
ERROR in ./~/font-awesome-webpack/~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./~/font-awesome-webpack/font-awesome.config.js
Module not found: Error: Cannot resolve module 'url-loader' in /app/web/node_modules/font-awesome-webpack
次にwebpack.config.jsを修正したらおしまいです。
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
}
};