webpack4 系列教程(十一)：字体文件处理
程序员文章站
2022-05-04 13:23:31
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步 "《webpack4 系列教程(十一)：字体文件处理》原文地址" 。或者来我的小站看更多内容： "godbmw.com" 0. 课程介绍和资料 " 本节课源码" " 所有课程源码" 本节课的代码目录如下： 本节课的 内容如下： 1. ......
教程所示图片使用的是 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.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，字体文件被正确引入：
上一篇： slf4j使用 日志
下一篇： 解决安卓字体偏移：页面整体缩放