Webpack打包font-awesome
来源:互联网 发布:java流式读取文件 编辑:程序博客网 时间:2024/05/22 16:03
使用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
1 0
- Webpack打包font-awesome
- Webpack打包font-awesome
- font-awesome
- Font Awesome
- font awesome
- Font Awesome
- font-Awesome
- vue打包后font-awesome无法正常显示
- bootstrap 集成font-awesome
- Bootstrap + Font Awesome
- font-awesome图标用法
- Font Awesome 自定义 CSS
- font-awesome 原理分析
- ng Use Font Awesome
- 使用Font Awesome
- Font Awesome 使用
- Font awesome小图标
- 字体图标--Font Awesome
- Quartz 2D编程指南(2) - 图形上下文(Graphics Contexts)
- 关于"net start mysql"提示"服务名无效"的启动mysql方法
- Android调试的Log.d()没有输出
- 网站
- c/c++ 的 指针的解引用
- Webpack打包font-awesome
- 【Unity&JSON】Console.WriteLine的问题
- jxl导出数据到excel文件
- Quartz 2D编程指南(3) - 路径(Paths)
- Java开发环境搭建
- 1>&2, 2>&1, &>
- Eclipse+ADT+Android SDK 搭建安卓开发环境
- git要有暂存区概念的原因
- Modbus名词解释