webpack集成font-awesome时输出的字体文件为JavaScript代码如何解决

核心是Webpack 5内置资源处理模块与自定义file-loader的冲突：
Webpack 5版本默认内置了Asset Modules能力，会自动识别处理字体、图片类静态资源。你当前配置中同时使用了自定义的file-loader处理字体/图片格式，两者叠加会导致二次处理：第一次file-loader将字体文件转换为导出资源路径的JS代码，第二次Webpack 5内置的资源模块又将这段JS代码作为字体文件的内容输出，就生成了你看到的内容为JS代码的无效woff文件。

任选以下一种方案即可：

方案1：保留file-loader，禁用内置资源模块的重复处理 #

在静态资源处理规则中新增type: 'javascript/auto'配置，告诉Webpack 5不要用内置模块处理该规则匹配的文件，完全交给file-loader处理：

{
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
    type: 'javascript/auto', // 新增该行配置
    use: {
        loader: 'file-loader',
        options: {
            name: "[path][name].[ext]"
        }
    }
}

方案2：移除file-loader，使用Webpack 5官方推荐的Asset Modules处理静态资源 #

Webpack 5内置的Asset Modules可完全替代file-loader的功能，无需额外安装依赖，直接替换原静态资源处理规则即可：

{
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
    type: 'asset/resource',
    generator: {
        filename: "[path][name].[ext]"
    }
}

修改后可将项目依赖中的file-loader卸载，清理冗余依赖。

修改配置后重新执行打包，CSS中引用的就会是真实的字体文件，可正常加载。

内容的提问来源于stack exchange，提问作者protango