教程所示图片使用的是 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. C#程序以管理员权限运行(ZT)

    本文转载:http://www.cnblogs.com/Interkey/p/RunAsAdmin.html 在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) ...

  2. [转]kaldi 神经网络

    转自:http://blog.csdn.net/xmdxcsj/article/details/54695506 overview type author CPU/GPU feature nnet1 ...

  3. Javascript高级编程学习笔记（73）—— 表单（1）表单基础

    表单 JS最初的一个用途就是帮助服务器分担处理表单的责任 时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用 ...

  4. java中如何模拟真正的同时并发请求？

    有时需要测试一下某个功能的并发性能,又不要想借助于其他工具,索性就自己的开发语言,来一个并发请求就最方便了. java中模拟并发请求,自然是很方便的,只要多开几个线程,发起请求就好了.但是,这种请求, ...

  5. lua模块demo（redis，http，mysql，cjson，本地缓存）

    1. lua模块demo(redis,http,mysql,cjson,本地缓存) 1.1. 配置 在nginx.conf中设置lua_shared_dict my_cache 128m; 开启ngi ...

  6. postgresql 安装文档

    tar xf postgresql-9.4.5.tar.gz cd postgresql-9.4.5 yum grouplist yum grouplist|grep Deve yum groupin ...

  7. 对称加密AES

    static void Main(string[] args) { //string str = "rqiJI7eEICT+YZmScpAdbjzLnA4mgL3uU5uHXLBeaE6s8 ...

  8. Redis 的 8 大应用场景！

    之前讲过Redis的介绍,及使用Redis带来的优势,这章整理了一下Redis的应用场景,也是非常重要的,学不学得好,能正常落地是关键. 下面一一来分析下Redis的应用场景都有哪些. 1.缓存 缓存 ...

  9. JDK9新特性实战：流关闭新姿势

    做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...

  10. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...