webpack4 系列教程(十一)：字型檔案處理

godbmw發表於2018-10-10
Web

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十一)：字型檔案處理》原文地址。或者來我的小站看更多內容：godbmw.com

0. 課程介紹和資料

本節課的程式碼目錄如下：

webpack4 系列教程(十一)：字型檔案處理

本節課的package.json內容如下：

{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.1"
  }
}
複製程式碼

1. 準備字型檔案和樣式

如上面的程式碼目錄所示，字型檔案和樣式都放在了/src/assets/fonts/目錄下。點我直接下載相關檔案

2. 編寫入口檔案

為了提取 css 樣式到單獨檔案，需要用到ExtractTextPlugin外掛。在專案的入口檔案需要引入style-loader和css-loader:

// app.js
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";

import "./assets/fonts/iconfont.css";
複製程式碼

3. 處理字型檔案

藉助url-loader，可以識別並且處理eot、woff等結尾的字型檔案。同時，根據字型檔案大小，可以靈活配置是否進行base64編碼。下面的 demo 就是當檔案大小小於5000B的時候，進行base64編碼。

// webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
  filename: "[name].min.css",
  allChunks: false
});

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: "style-loader"
          },
          use: [
            {
              loader: "css-loader"
            }
          ]
        })
      },
      {
        test: /\.(eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
              publicPath: "fonts/",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [extractTextPlugin]
};
複製程式碼

4. 編寫index.html

按照上面的配置，打包好的css和js均位於/src/dist/資料夾下。因此，需要在index.html中引入這兩個檔案（假設已經打包完畢）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./dist/app.min.css">
</head>

<body>
  <div id="app">
    <div class="box">
      <i class="iconfont icon-xiazai"></i>
      <i class="iconfont icon-shoucang"></i>
      <i class="iconfont icon-erweima"></i>
      <i class="iconfont icon-xiangshang"></i>
      <i class="iconfont icon-qiehuanzuhu"></i>
      <i class="iconfont icon-sort"></i>
      <i class="iconfont icon-yonghu"></i>
    </div>
  </div>
  <script src="./dist/app.bundle.js"></script>
</body>

</html>
複製程式碼

5. 結果分析和驗證

CMD中執行webpack進行打包，打包結果如下：

webpack4 系列教程(十一)：字型檔案處理

在 Chrome 中開啟index.html，字型檔案被正確引入：

webpack4 系列教程(十一)：字型檔案處理

相關文章