webpack 处理字体_Webpack打包字体font-awesome的方法示例

忘是亡心i 2023-01-01 01:41 129阅读 0赞

使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件：

1. 首先安装依赖:

复制代码 代码如下:

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. 在入口文件中引入font-awesome

require('font-awesome-webpack');

3. 设置webpack.config.js处理字体文件

这里有两种方式，如果你不想单独生成字体文件，而是想把字体文件和css文件构建到一个文件中，可以使用url-loader，设置如下：

module: \{

rules: \[

// 省略其他配置...

// font-awesome

\{

test: /\\.(eot|svg|ttf|woff|woff2)\\w\*/,

loader: 'url-loader?limit=1000000'

\},

// 省略其他配置...

\]

\}

这里给url-loader传递了一个参数limit，并且设置得比较大，这个数字可以自定义，但是一定要保证大于最大字体文件的大小，因为这个参数是告诉url-loader，如果文件小于这个参数，那么就以Data Url的方式直接构建到文件中。使用这种方式最方便，但是缺点就是构建出来的文件特别大，并且在线上的时候没办法使用cdn缓存文件，不建议部署到线上。

第二种方法就是制定url-loader或者file-loader在构建的时候文件的输出目录，这样在部署的时候font-awesome就会依赖在构建时指定目录下的字体文件，而不会出现找不到字体文件的问题了，此时，webpack的构建配置如下：

module: \{

rules: \[

// 省略其他配置...

// font-awesome

\{

test: /\\.(eot|svg|ttf|woff|woff2)\\w\*/,

loader: 'file-loader?publicPath=/static/res/&outputPath=font/'

\},

// 省略其他配置...

\]

\}

经过上面的配置构建的工程，font-awesome就会到“/static/res/font/”目录下寻找指定的字体文件，而同时在你构建的工程中也会生成对应的font文件夹，你只需要将这个font文件夹中的字体文件拷贝到“/static/res/font”目录下(如果publicPath为“./”，表示你直接依赖构建目录下的font文件，则不用拷贝)，这样当你访问你的页面时就能够正确请求到字体文件了。

参考

https://github.com/webpack-contrib/file-loader

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本文标题: Webpack打包字体font-awesome的方法示例

本文地址: http://www.cppcns.com/ruanjian/java/226365.html

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 处理字体_Webpack打包字体font-awesome的方法示例

使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引

忘是亡心i/ 2023年01月01日 01:41/ 0 赞/ 130 阅读

相关 QML中使用FontAwesome字体图标

0.前言 FontAwesome是一套可免费使用的字体图标库，官网介绍： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

怼烎@/ 2022年10月29日 09:16/ 0 赞/ 324 阅读

相关 iOS开发- 巧用FontAwesome(图标,字体)

首先,先介绍一下FontAwesome。 Font Awesome 是为 Twitter [Bootstrap][] 设计的图标字体。通过Web Font的方式来显示一些图标

忘是亡心i/ 2022年08月25日 14:42/ 0 赞/ 253 阅读

相关 Webpack打包

1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

爱被打了一巴掌/ 2022年07月12日 09:54/ 0 赞/ 319 阅读

相关 vue-fontawesome 字体分层 && 计数器

场景 . 网站通知类消息肯定是需要计数器的参考文章 > FortAwesome/vue-fontawesome `https://github.com/

布满荆棘的人生/ 2022年05月19日 09:52/ 0 赞/ 221 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 345 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 465 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 595 阅读

相关 FontAwesome图标字体库和CSS框架

1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色

系统管理员/ 2021年09月02日 05:59/ 0 赞/ 555 阅读

相关 webpack4 打包字体图标等其他资源

iconfont举例 1、下载图标代码到本地 (1)查看iconfont.css中需要的字体图标后缀名 (2)打开下载代码

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 20:15/ 0 赞/ 480 阅读