Webpack打包字体font-awesome的方法示例


Posted in Javascript onApril 26, 2018

使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery 插件学习(六)
Aug 06 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 #Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
Javasript设计模式之链式调用详解
Apr 26 #Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 #Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 #Javascript
jQuery length 和 size()区别总结
Apr 26 #jQuery
You might like
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python中模块string.py详解
2017/03/12 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
python中turtle库的简单使用教程
2020/11/11 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
安全教育月活动总结
2014/05/05 职场文书
鼓舞士气的口号
2014/06/16 职场文书
2015年质检工作总结
2015/05/04 职场文书
经营场所证明范本
2015/06/19 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
把77A收信机改造成收音机
2022/04/05 无线电