0
点赞
收藏
分享

微信扫一扫

webpack-iconfont-loader

打包字体图标

字体图标中也用到了 url 用到了文件, 所以我们需要通过file-loader来处理字体图标文件。

修改 webpack 核心配置文件如下所示:

webpack-iconfont-loader_ico

const path = require("path");

module.exports = {
module: {
rules: [
// 打包字体图标规则
{
test: /\.(eot|json|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
// 指定打包后文件名称
name: '[name].[ext]',
// 指定打包后文件存放目录
outputPath: 'font/',
}
}
]
}
]
}
};

添加了之后我们修改一下 index.js 的内容, 如下所示,也就是使用一下图标的内容我们来看看打包的效果,当然了你不配置之前如果你的内容中有包含 ​​iconfont​​ 的内容打包肯定是会出错的,所以这里就不演示错误了,就直接配置好直接打包了,index.js 内容如下:

import "./font/iconfont.css"

document.body.innerHTML = "<i class='iconfont icon-icon' style='font-size: 100px'></i>";

关于如上的 iconfont.css 文件下载地址如:

经过打包之后的效果如下所示:

webpack-iconfont-loader_Webpack4+实现原理_02




举报

相关推荐

0 条评论