Webpack打包字體font-awesome步驟詳解

這次帶給大家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中文網其它相關文章！

推薦閱讀：

Vue實作PopupWindow元件使用步驟解析

#jQuery實作電子時脈功能步驟詳解

#

以上是Webpack打包字體font-awesome步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！