webpack-iconfont-loader

打包字体图标

字体图标中也用到了 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 文件下载地址如：https://files.cnblogs.com/files/BNTang/font.zip

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