Webpack打包字体font-awesome的方法示例
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
使用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"htmlcode">
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'file-loader"_blank" href="https://github.com/webpack-contrib/file-loader" rel="external nofollow" >https://github.com/webpack-contrib/file-loader
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：webpack配置打包后图片路径出错的解决