教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十一)：字体文件处理》原文地址。或者来我的小站看更多内容：godbmw.com

0. 课程介绍和资料

本节课的代码目录如下：

本节课的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进行打包，打包结果如下：

在 Chrome 中打开index.html，字体文件被正确引入：

webpack4 系列教程(十一)：字体文件处理的更多相关文章

  1. webpack4 系列教程(十三)：自动生成HTML文件

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十三):自动生成 HTML 文件>原文地址.更欢迎来我的小站看更多原创内容:go ...

  2. webpack4 系列教程: 前言

    1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...

  3. webpack4 系列教程(十五)：开发模式与webpack-dev-server

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...

  4. webpack4 系列教程(十四)：Clean Plugin and Watch Mode

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...

  5. webpack4 系列教程(十二)：处理第三方JavaScript库

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...

  6. webpack4 系列教程(九): CSS Tree Shaking

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> ...

  7. webpack4 系列教程(七): SCSS提取和懒加载

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...

  8. webpack4 系列教程(六): 处理SCSS

    这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可.了解更多处理css的内容 >>> >>> 本节课源码 & ...

  9. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

随机推荐

  1. PaaS平台的尴尬与变革

    当今时代只要提到云计算这个词语,一定会提到云计算分为IaaS.PaaS.SaaS 这三个层面,现阶段云环境中IaaS和SaaS都实现了商品化.但是,PaaS作为云计算的服务模式之一,既不像IaaS那样 ...

  2. Dubbo 源码分析 - 集群容错之 Directory

    1. 简介 前面文章分析了服务的导出与引用过程,从本篇文章开始,我将开始分析 Dubbo 集群容错方面的源码.这部分源码包含四个部分,分别是服务目录 Directory.服务路由 Router.集群 ...

  3. 探讨npm依赖管理之peerDependencies

    引言 想必前端同学对npm的devDependencies和dependencies都比较熟悉,但是对peerDependencies可能就有点陌生,尤其是没有写过npm包插件的同学,比如之前使用gr ...

  4. Python自动化编程-树莓派的介绍与使用(一)

    Raspberry Pi(中文名为“树莓派”,简写为RPi,(或者RasPi / RPI) [1]  是为学习计算机编程教育而设计),只有信用卡大小的微型电脑,其系统基于Linux.  随着Windo ...

  5. Python学习笔记【第六篇】：迭代器、生成器、高阶函数、装饰器

    迭代器 迭代器是访问集合元素的一种方式,迭代器从对象的第一个元素开始访问,知道所有元素被访问完成.迭代器只能往前访问,不能通过索引访问. 类型内部使用__iter__()方法转为迭代器,使用__nex ...

  6. [Vuejs] svg-sprite-loader实现加载svg自定义组件

    1.安装 svg-sprite-loader npm install svg-sprite-loader -D 或者 npm install svg-sprite-loader --save-dev ...

  7. Metasploit Framework（8）后渗透测试（一）

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 使用场景: Kali机器IP:192.168.163. ...

  8. 使用 SonarQube 来分析 .NET Core 项目代码问题

    0.介绍 Sonar 是一款开源的代码分析工具,可能有很多人已经用过,本篇文章主要是讲解如何在 Docker 里面安装 Sonar 并且用其来分析 .Net Core 项目. Sonar 是一个用于代 ...

  9. mysql 开发基础系列5 运算符

    1. 算术运算符 2.比较运算符 注意NULL值不能用= 运算符 SELECT * FROM t WHERE c =NULL; -- 需要改成 SELECT * FROM t WHERE c IS N ...

  10. 如何走上更高平台分享传递干货知识：（开通个人Github面向开源及私有软件项目的托管平台：https://github.com/zlslch/）（图文详解）（博主推荐）

    不多说,直接上干货! https://github.com/ 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http ...