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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
jQuery cdn使用介绍
May 08 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
记一次vue跨域的解决
Oct 21 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中curl_multi的应用
2013/07/17 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
详解python中的hashlib模块的使用
2019/04/22 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
企业理念标语
2014/06/09 职场文书
2014年卫生工作总结
2014/11/27 职场文书
会计专业求职信范文
2015/03/19 职场文书
陪护人员误工证明
2015/06/24 职场文书