教程所示图片使用的是 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++内存读写例子

    /************************************************************* // 声明头文件 #ifndef LyShark__h #define L ...

  2. Vue 中是如何解析 template 字符串为 VNode 的?

    在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...

  3. poj 1177 --- Picture(线段树+扫描线 求矩形并的周长)

    题目链接 Description A number of rectangular posters, photographs and other pictures of the same shape a ...

  4. 【云服务器部署】---Linux下安装nginx

    [云服务器部署]---Linux下安装nginx 之前两篇,分别讲了:Linux下安装MySQL  和  springboot项目部署云服务器 nginx安装也是挺简单的.具体步骤如下: 第一步,下载 ...

  5. mybatis框架(4)---输入输出映射

    输入输出映射 通过parameterType制定输入参数类型 类型可以是简单类型(int String)也可以是POJO本身 或者包装类 1输入映射 关于输入简单类型和pojo本身的我就不写了,因为比 ...

  6. mysql 开发基础系列15 索引的设计和使用

    一.概述 所有mysql 列类型都可以被索引,是提高select查询性能的最佳方法. 根据存储引擎可以定义每个表的最大索引数和最大索引长度,每种引擎对每个表至少支持16个索引,总索引长度至少为256字 ...

  7. Hadoop学习笔记（二）：简单操作

    1. 启动namenode和datanode,在master上输入命令hdsf dfsadmin -report查看整个集群的运行情况(记得关闭防火墙) 2. 输入命令查看hadoop监听的端口,ne ...

  8. leetcode — combination-sum-ii

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** *Source : https://oj ...

  9. 获取完全一样的数据库，包括表与表之间的外键关系，check，default表结构脚本

    今天公司给了一个任务,某一个项目由于数据过大,造成Sql Server 2012 的运行占用很大内存,于是要把之前的不常用的数据分开.要求写个脚本,要求: 1.能获取原来数据库中的表结构,主键一致.表 ...

  10. Linux常用命令之网络和关机重启命令

    目录 1.网络命令 一.给指定用户发送信息:write 二.给所有用户发送广播信息:wall 三.测试网络连通性:ping 四.查看和设置网卡信息:ifconfig 五.查看发送电子邮件:mail 六 ...