Webpack打包字体font-awesome的方法示例
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件：
1. 首先安装依赖:
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面逐一介绍2015-12-12
这篇文章主要介绍了JS使用正则表达式判断输入框失去焦点事件问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了微信小程序接入微信支付实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了实例代码详解javascript实现窗口抖动及qq窗口抖动的相关资料,需要的朋友可以参考下2016-01-01
javascript设计模式 – 装饰模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 装饰模式,结合实例形式分析了javascript装饰模式基本概念、原理、应用场景及操作注意事项,需要的朋友可以参考下2020-04-04
你还不懂递归？读完这篇文章保证你会懂，下面这篇文章主要给大家介绍了关于递归的相关内容，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
这篇文章主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下2017-02-02
Function是javascript里最常用的一个概念，javascript里的function是最容易入手的一个功能，但它也是javascript最难理解最难掌握的一个概念。这篇文章主要介绍了JavaScript中的Function类型的相关资料，一起看下吧2016-07-07
JavaScript 语言具有多种数据类型,它们可以大致分为两大类：基本数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）,本文将带大家一起从基础到精通深入探究JavaScript的类型判断,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了详解webpack分离css单独打包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论