@H_
696_0@
2. 在入口文件中引入font-awesome
require('font-awesome-webpack'
);
@H_
696_0@
3. 设置webpack.config.js处理字体文件
@H_
696_0@这里有两种方式,如果你不想单独生成字体文件,而是想把字体文件和css文件构建到一个文件中,可以使用url-loader,设置如下:
{
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,loader: 'url-loader?limit=1000000'
},// 省略其他配置...
]
@H_
696_0@}
@H_
696_0@这里给url-loader传递了一个参数limit,并且设置得比较大,这个数字
可以自定义,但是一定要保证大于最大字体文件的大小,因为这个参数是告诉url-loader,如果文件小于这个参数,那么就以Data Url的方式直接构建到文件中。使用这种方式最方
便,但是缺点就是构建出来的文件特别大,并且在线上的时候没办法使用cdn缓存文件,不建议部署到线上。
@H_
696_0@第二种方法就是制定url-loader或者file-loader在构建的时候文件的输出目录,这样在部署的时候font-awesome就会依赖在构建时指定目录下的字体文件,而不
会出现找不到字体文件的问题了,此时,webpack的构建配置如下:
{
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
},// 省略其他配置...
@H_
696_0@]
}
@H_
696_0@经过上面的配置构建的工程,font-awesome就会到“/static/res/font/”目录下寻找指定的字体文件,而同时在你构建的工程中也会生成对应的font文件夹,你只需要将这个font文件夹中的字体文件拷贝到“/static/res/font”目录下(如果publicPath为“./”,表示你直接依赖构建目录下的font文件,则不用拷贝),这样当你访问
你的页面时就能够正确
请求到字体文件了。
@H_
696_0@
@H_
696_0@
https://github.com/webpack-contrib/file-loader
@H_
696_0@以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
大佬总结
以上是大佬教程为你收集整理的Webpack打包字体font-awesome的方法示例全部内容,希望文章能够帮你解决Webpack打包字体font-awesome的方法示例所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。