Webpack4でFont-awesomeを利用する

#Webpack4を使ってFont-awesomeを利用する

通常であればCDNを使って済みますが、Webサーバーにホスティングして公開したい人も多いはずです。

ダウンロードしたFontsディレクトリやCSSなどを手動でコピーすれば使えますが、Webpackを使っていると、自動でnode_modulesディレクトリから取得してうまい具合に配置してほしいと願うものです。

以下、Font-awesome用のプラグイン等は使わずに、シンプルにFont-awesomeを利用する方法です。

---

###0.前提
NPMを利用して次のパッケージをインストール済みとします。
また、今回はFont-awesome系のファイルをJSにはバンドルせず、FontディレクトリやCSSを別ファイルにする分ける方法をとっています。

"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"@fortawesome/fontawesome-free": "^5.6.3",
"node-sass": "^4.11.0",
"file-loader": "^3.0.1",
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",

###1.webpack.config.jsの設定
次のように記述します。

module: {
    rules: [
        {
            // Sassファイルの読み込みとコンパイル 
            test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子 
            exclude: /node_modules/,
            use: [

                {
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader',
                    options: {
                        outputStyle: SassOutputStyle,
                    }
                },
            ],
        },
        {
            test: /\.(ttf|eot|woff|woff2|svg)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: './webfonts',
                    publicPath: '../webfonts',
                }
            }]
        },


    ]
},
plugins: [
    new MiniCssExtractPlugin({
        // ここで設定するfilenameは出力するファイル名
        filename: 'CSSの出力先ファイル名',
    }),
]

###2.WebpackのエントリーポイントにFont-awesomeのSCSSを指定
流れとしては、エントリーポイント（JSファイル）から自前のSCSSファイルを呼び出し、そこからnode_modules内のFont-awesomeを呼び出します。

自前のSCSSファイルには、次のように記載します。

// font-awesome で使うディレクトリの場所を指定
// 最初の~は、Node_modulesのディレクトリを指定するの同じ意味。
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

// font-awesome
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

最初の変数$fa-font-pathは、Font-awesome内にて利用されている変数で、フォントファイルの格納場所を指定するものです。
これを、Node_modules内のフォントを参照するように設定しています。

###3.npx webpackを実行
これで、Font-awesomeのCSSファイルがWebpack内で指定したCSS出力ディレクトリに出力されるはずです。
また、Fontファイルは、Webfontsディレクトリに出力されています。

---

##注意点
CSS-loaderのオプションで、URLをFalseにしていると、SCSS内でフォントファイル等を参照していても、フォントファイルのヒモ付が無視され、そのままURL出力されるようになります。
私は上記のオプションを設定していたため、しばらくFontファイルが出力されずにハマりました。

以上