教程所示图片使用的是 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. nginx 开启gzip 压缩资源

    upstream sems { server 127.0.0.1:10171 weight=1 fail_timeout=0; } server { listen 80; server_name ww ...

  2. 自学自用 = B站（操作系统_清华大学(向勇、陈渝)） 未完待续。。

    视频地址 https://www.bilibili.com/video/av6538245 介绍 本篇博客,旨在记录视频学习的要点,所以格式随意, 方便本人日后自考和回忆,有兴趣的朋友可以评论讨论. ...

  3. Java 利用 UUID 生成唯一性 ID 示例代码

    用户ID首先生成,订单ID的生成可依赖用户ID. 下面代码前六位是日期,后八位是随机数,用于生成用户ID. public String getNewUserId() { String ipAddres ...

  4. 第42节：Java知识点回顾复习

    Java介绍 Java是一门面向对象的程序设计的编程语言,在1995年,sun公司发布了Java这门编程语言,有咖啡的名称,是当时灵机一动的想法.在2010年的时候被Oracle公司收购了,目前jdk ...

  5. Spring autowire自动装配 ByType和ByName

    不使用自动装配前使用的是类的引用: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=& ...

  6. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...

  7. iOS学习——（转）iOS中关于通知的使用

    在移动端开打过程中,经常会用到通知和推送,例如有短信来了需要通知提示,手机横屏了需要通知提示,插上耳机了需要通知提示等等,我们可以根据这些通知采取对应的动作.iOS系统自身定义了很对通知,但是在开发过 ...

  8. kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  9. logstash解耦之redis消息队列

    logstash解耦之redis消息队列 架构图如下: 说明:通过input收集日志消息放入消息队列服务中(redis,MSMQ.Resque.ActiveMQ,RabbitMQ),再通过output ...

  10. Android--Activity中使用Intent传值

    Intent,又称为意图,是一种运行时绑定机制,它能在程序运行的过程中链接两个不同的组件(Activity.Service.BroadcastReceiver).通过Intent,程序可以向Andro ...