打包字体图标
字体图标中也用到了 url 用到了文件, 所以我们需要通过file-loader来处理字体图标文件。
修改 webpack 核心配置文件如下所示：
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 文件下载地址如：
经过打包之后的效果如下所示：
