webpack最佳入門實踐系列(07)

7.使用字體

7.1.安裝字體庫-font-awesome

咱們經過npm來安裝字體

npm install font-awesome --save

　　

這個時候，咱們的package.json配置文件變成這樣：

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0"
  }
}

　　

注意：咱們在安裝第三方包的時候，可使用下面兩條命令

npm install font-awesome --save

　　

以及

npm install font-awesome --save-dev

　　

這兩條命令的區別是，--save 安裝的是項目依賴，會把當前安裝的包一塊兒打包隨着項目發佈到線上，而--save-dev安裝的包屬於開發依賴，不會和項目一塊兒打包發佈到線上，例如，像webpack-dev-server這樣的包，咱們只是在本地開發的時候使用，方便調試，而不須要發佈到線上的，一般咱們都會做爲開發依賴安裝，像font-awesome這樣的包，咱們線上的網頁也會使用，因此會一塊兒打包發佈，因此一般咱們都會做爲項目依賴安裝，開發依賴包的安裝信息在package.json中devDependencies這個屬性下面，項目依賴包的安裝信息在package.json中的dependencies屬性下面

7.2.使用字體庫

在index.js 文件中引入

// 引入帶有字體的css文件，用來測試webpack是否支持字體大包
import "font-awesome/css/font-awesome.css"

　　

這個時候，咱們經過npm start命令來啓動，查看效果，此時會報一個熟悉的錯誤

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.css 6:645-696
 @ ./node_modules/font-awesome/css/font-awesome.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

　　

錯誤的意思是咱們須要使用一個loader來處理字體文件，如今去打開font-awesome.css這個文件，查看裏面到底有哪些內容（這個文件位置在node_modules/font-awesome/css/font-awesome.css)

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

　　

經過上面font-awesome文件的內容，咱們知道了它引入了它上級文件夾fonts中的字體文件，這些字體文件包括：.eot、.svg、.ttf、.woff、.woff2等格式，錯誤信息告訴咱們的就是webpack不支持打包這些格式的文件，那麼，咱們應該使用什麼loader來讓webpack支持打包這些文件呢？

讓咱們來回顧一下file-loader作的事情

1. 將文件移動到輸出目錄
2. 自動處理url後面的文件路徑，獲得一個最終的引用路徑

當文件被移動到輸出目錄，而且有一個最終正確路徑的時候，咱們就能夠正確使用這個文件了，因此，咱們嘗試使用file-loader來支持上面那些格式的字體文件

在webpack中增長配置，經過設置字體格式的匹配規則來使用file-loader,原理和處理圖片同樣

 // 處理文字
{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: ['file-loader']
}

　　

接下來，咱們經過命令打包

npm run dev

　　

這個時候，會發現dist這個輸出目錄下已經多出來幾個字體文件了

咱們接下來去測試，咱們的字體能不能正常使用,咱們在src下面index.html文件中輸入如下內容，引入圖標

<div id="app">
    <i class="fa fa-bath" aria-hidden="true"></i>
    <i class="fa fa-envelope-open" aria-hidden="true"></i>
    <i class="fa fa-microchip" aria-hidden="true"></i>
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>

　　

而後，咱們須要再次運行命令打包

npm run dev

　　

文件打包出來後，咱們直接運行html文件，注意：這個時候不要經過服務器去訪問，直接本地瀏覽器打開就好

打開後，若是看到咱們引入的圖標，證實webpack已經正常支持引入字體了