当前位置:Gxlcms > JavaScript > font-awesome字体打包使用案例解析(附代码)

font-awesome字体打包使用案例解析(附代码)

时间:2021-07-01 10:21:17 帮助过:35人阅读

这次给大家带来font-awesome字体打包使用案例解析(附代码),font-awesome字体打包使用的注意事项有哪些,下面就是实战案例,一起来看一下。

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文件,则不用拷贝),这样当你访问你的页面时就能够正确请求到字体文件了。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

vue拦截器兼容性处理

console怎样打印日志信息

jQuery实现鼠标绑定事件图片放大功能

以上就是font-awesome字体打包使用案例解析(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行