React / webpack

[webpack/React] 圖片loader 與 Font Awesome 安裝

second9040
這篇是因為網站中想要使用 Font Awesome 才發現原本的 webpack 設定檔沒有處理圖片的 loader。

順序是
1. 安裝 file-loader 處理圖片
2. 安裝 Font Awesome

 

安裝 file-loader 處理圖片
npm i file-loader / yarn add file-loader

 

裝完之後更新一下 webpack.config.js

// 加在 module.rules
{
  test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
  loader: "file-loader",
  options: {
    name(resourcePath) {
      // `resourcePath` - `/absolute/path/to/file.js`
      if (/(woff|woff2|eot|ttf)/.test(resourcePath)) {
        return "font/[name].[ext]";
      }
      return "image/[name].[ext]";
    },
  },
},

 

接著

npm run build / yarn build
npm run serve / yarn serve

 

完成以上設定之後，接著來安裝 Font Awesome。

安裝 Font Awesome

關於如何使用可以參考我之前的這篇文章: 使用Font Awesome作為網站icon與製作字型icon

不過這邊不知為何使用文章中 npm 的指令來安裝最後是失敗的，最後我是使用

yarn add @fortawesome/fontawesome-free

(add 後面直接接 --save 會報錯，沒嘗試，不過應該是可以加在最後面)
 

完成後在需要使用到字型的檔案中引入，

import "@fortawesome/fontawesome-free/css/all.css";

沒意外的話就可以在網頁中看到引用的字型了。
 
 

這邊過程中有遇到以下錯誤訊息：

ERROR in ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@fortawesome/fontawesome-free/css/all.css) 7:36-76
@ ./node_modules/@fortawesome/fontawesome-free/css/all.css
@ ./src/views/FetchAPI.jsx
@ ./app.jsx
@ multi ./index.js ./app.jsx

主要就是 loader 的問題，裝完 file-loader 之後並設定就可以解決，就是本篇文章中第一步的部分。

 

另外 loader 設定那邊有配置 options，

options: {
name(resourcePath) {
// `resourcePath` - `/absolute/path/to/file.js`
if (/(woff|woff2|eot|ttf)/.test(resourcePath)) {
return "font/[name].[ext]";
}
return "image/[name].[ext]";
},
},

 

這邊主要是因為如果按照預設配置，所有套件生成的檔案(圖片檔/字型檔)將會直接出現在指定目錄之下(以目前的配置來說會是 dist 資料夾之下)，並且命名方式會是 hash (看起來就是亂碼)，檔案會顯得雜亂，所以一般都會習慣配置在指定的資料夾。

resourcePath 是一個可以取得檔案名稱(含附檔名)的變數，用這個變數來判斷檔案類型，分別擺放到對應的資料夾。

不過其實目前專案都還沒有圖片，所以所有生成的檔案都是字型檔，不過因為 svg 也可能是一般圖片，所以就還是放到 image 資料夾，避免造成以後可能發生混亂。

 

這邊用 React 做了個 Fetch API 的練習，需要完整的 webpack.config.js code 的朋友可以參考。 Demo code
 

如果想要看 font awesome 出來的成品，可以隨便輸入一個 github 帳號(預設是我的帳號XD) 點選「取得 github repo按鈕」，在拿到資料前，搜尋結果的地方會有一個橘色小小的 loading 圖示，那個就是用字型做的啦。
 
這個是單頁版的 Demo (沒有透過 webpack)

 
參考文章
Problem with font-awesome #53
file-loader
【React.js入門 - 15】 使用Http request - Fetch Api