這次帶給大家Webpack打包字體font-awesome步驟詳解，Webpack打包字體font-awesome的注意事項有哪些，以下就是實戰案例，一起來看一下。
使用webpack建立font-awesome或bootstrap的時候，最常見的一個問題就是建立字體檔案的問題。常常會出現無法找到字體檔案的問題。下面就講如何正確建構引入字型檔：
1. 首先安裝依賴:
npm install style-loader css-loader file-loader font-awesome-webpack --save-dev
2. 在入口檔中引入font-awesome
require('font-awesome-webpack');
3. 設定webpack.config.js處理字體檔案
這裡有兩種方式，如果你不想單獨產生字體文件，而是想把字體文件和css文件建構到一個文件中，可以使用url-loader，設定如下：
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'url-loader?limit=1000000'
},
// 省略其他配置...
]
}這裡給url-loader傳遞了一個參數limit，並且設定得比較大，這個數字可以自訂，但是一定要保證大於最大字體檔案的大小，因為這個參數是告訴url-loader，如果檔案小於這個參數，那麼就以Data Url的方式直接建構到檔案中。使用這種方式最方便，但是缺點就是建置出來的文件特別大，而且在線上的時候沒辦法使用cdn快取文件，不建議部署到線上。
第二種方法就是製定url-loader或file-loader在建置的時候文件的輸出目錄，這樣部署的時候font-awesome就會依賴在建置時指定目錄下的字型文件，而不會出現找不到字型檔案的問題了，此時，webpack的建置配置如下：
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
},
// 省略其他配置...
]
}經過上面的設定建置的工程，font-awesome就會到「/static/res/font/ 」目錄下尋找指定的字型文件，而同時在你建置的工程中也會產生對應的font資料夾，你只需要將這個font資料夾中的字型檔案拷貝到「/static/res/font」目錄下（如果publicPath為“./”，表示你直接依賴建立目錄下的font文件，則不用拷貝），這樣當你訪問你的頁面時就能夠正確請求到字體文件了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是Webpack打包字體font-awesome步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
