教程所示图片使用的是 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- \";

import \"./assets/fonts/iconfont.css\";

3. 处理字体文件

借助url-loader，可以识别并且处理eot、woff等结尾的字体文件。同时，根据字体文件大小，可以灵活配置是否进行 64编码。下面的 demo 就是当文件大小小于5000B的时候，进行 64编码。

// 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 \' 64\'; 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>
  <  charset=\"UTF-8\">
  <  name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
  < >Document</ >
  <  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>
  <  src=\"./dist/app.bundle.js\"></ >
</body>

</html>

5. 结果分析和验证

CMD中运行webpack进行打包，打包结果如下：

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章