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

　　

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

　　

<强> 1。首先安装依赖:

　　

代码如下:npm安装style-loader css-loader file-loader font-awesome-webpack——save-dev ,,

　　

<强> 2。在入口文件中引入font-awesome

　　 　　 　　要求(“font-awesome-webpack”); 　　 　　

<强> 3。设置webpack.config.js处理字体文件

　　

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

　　 　　 　　模块:{ 　　规则:[//省略其他配置…//font-awesome 　　{ 　　测试:/\。(测试结束svg | | ttf woff | | woff2) \ w */装载机:“url-loader& # 63;限制=1000000 　　},//省略其他配置… 　　] 　　} 　　 　　

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

　　

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

　　 　　 　　模块:{ 　　规则:[//省略其他配置…//font-awesome 　　{ 　　测试:/\。(测试结束svg | | ttf woff | | woff2) \ w */装载机:“file-loader& # 63; publicPath=/静态/res/, outputPath=字体/' 　　},//省略其他配置… 　　] 　　} 　　 　　之前 　　 　　

经过上面的配置构建的工程,font-awesome就会到“/静态/res/字体/蹦柯枷卵罢抑付ǖ淖痔逦募?而同时在你构建的工程中也会生成对应的字体文件夹,你只需要将这个字体文件夹中的字体文件拷贝到“/静态/res/字体”目录下(如果publicPath为“。/?表示你直接依赖构建目录下的字体文件,则不用拷贝),这样当你访问你的页面时就能够正确请求到字体文件了。

　　

<强>参考

　　

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

　　

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

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