教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步。或者来我的小站看更多内容：
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.jsimport "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.jsconst 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中引入这两个文件（假设已经打包完毕）：
Document
5. 结果分析和验证
CMD中运行webpack进行打包，打包结果如下：
在 Chrome 中打开index.html，字体文件被正确引入：
