webpack4 系列教程(十一):字体文件处理
教程所示图片使用的是 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 系列教程(十一):字体文件处理的更多相关文章
- webpack4 系列教程(十三):自动生成HTML文件
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十三):自动生成 HTML 文件>原文地址.更欢迎来我的小站看更多原创内容:go ...
- webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
- webpack4 系列教程(十五):开发模式与webpack-dev-server
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...
- webpack4 系列教程(十四):Clean Plugin and Watch Mode
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- webpack4 系列教程(九): CSS Tree Shaking
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> ...
- webpack4 系列教程(七): SCSS提取和懒加载
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...
- webpack4 系列教程(六): 处理SCSS
这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可.了解更多处理css的内容 >>> >>> 本节课源码 & ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
随机推荐
- JSTL标签库的基本教程之核心标签库(二)
JSTL标签库的基本教程之核心标签库(二) 核心标签库 标签 描述 <c:out> 用于在JSP中显示数据,就像<%= ... > <c:set> 用于保存数据 & ...
- 全面了解移动端DNS域名劫持等杂症:原理、根源、HttpDNS解决方案等
1.引言 对于互联网,域名是访问的第一跳,而这一跳很多时候会“失足”(尤其是移动端网络),导致访问错误内容.失败连接等,让用户在互联网上畅游的爽快瞬间消失. 而对于这关键的第一跳,包括鹅厂在内的国 ...
- Android 展示控件之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的关系
一.Surface Surface在SDK的文档中的描述是这样的:Handle onto a raw buffer that is being managed by the screen compos ...
- SpringMVC框架二:SpringMVC与MyBatis整合
下面整合SpringMVC和MyBatis框架,并做一个小案例 创建数据库springmvc,并创建两张表,加入一些数据: 两张表:商品表,用户表 CREATE DATABASE springmvc; ...
- python 实现wav的波形显示(时域和频域)
音频处理中,经常要看一下啊频域图是什么样子的,这里自己写了一个小程序,可以完美的同步显示时域和频域图,直接上代码: #wave data -xlxw #import import wave as we ...
- 本地语音识别开源软件pocketsphinx调试总结
1问题一: fatal error: pocketsphinx.h: No such file or directory 解决方法: $ cd /usr/include $ sudo ln -s /m ...
- 深度学习环境配置:Ubuntu16.04安装GTX1080Ti+CUDA9.0+cuDNN7.0完整安装教程(多链接多参考文章)
本来就对Linux不熟悉,经过几天惨痛的教训,参考了不知道多少篇文章,终于把环境装好了,每篇文章或多或少都有一些用,但没有一篇完整的能解决我安装过程碰到的问题,所以决定还是自己写一篇我安装过程的教程, ...
- Python 中的object takes no parameters错误
Python是一门面向对象的语言,中我们首先创建一个类: class Student(object): def _init_(self,name,score): self.name = name se ...
- IdentityServer4(7)- 使用客户端认证控制API访问(客户端授权模式)
一.前言 本文已更新到 .NET Core 2.2 本文包括后续的Demo都会放在github:https://github.com/stulzq/IdentityServer4.Samples (Q ...
- 【Python】正则表达式简单教程
说明:本文主要是根据廖雪峰网站的正则表达式教程学习,并根据需要做了少许修改,此处记录下来以备后续查看. <Python正则表达式纯代码极简教程>链接:https://www.cnblogs ...