为什么 webpack 发出实际上是 javascript 的字体文件？答案

【问题标题】：Why is webpack emitting font files that are actually javascript?为什么 webpack 发出实际上是 javascript 的字体文件？
【发布时间】：2022-01-05 23:33:18
【问题描述】：

我正在尝试通过SASS 将font-awesome 集成到webpack 项目中。但是我遇到了一个奇怪的问题，字体文件是这样发出的：

3cbb9abfb7d5d9b3ede7.woff

export default __webpack_public_path__ + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff";

引用的fa-regular-400.woff 也在该位置发出，但是发出的 CSS 引用了那些奇怪的 javascript 字体文件，这些文件显然没有被浏览器加载，因为它们是无效的。

我发现的类似问题的唯一参考是在此线程上：https://github.com/rails/webpacker/issues/2680。但是，那里的解决方案是针对某些其他技术的，不适用于这种情况。

这是发出的目录：

所以，这是我的 webpack 规则：

{
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/
}, {
    test: /\.s[ac]ss$/i,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
            loader: 'postcss-loader', // Run post css actions
        }, {
            loader: 'sass-loader' // compiles Sass to CSS
        }
    ],
}, {
    test: /\.html$/,
    exclude: /node_modules/,
    use: {
        loader: 'html-loader'
    }
}, {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
    use: {
        loader: 'file-loader',
        options: {
            name: "[path][name].[ext]"
        }
    }
}

我在 scss 中像这样导入 font-awesome：

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";

【问题讨论】：

标签： webpack fonts font-awesome

【解决方案1】：

好吧，奇怪的是，答案是一起删除file-loader 规则。我从 webpack 配置中删除了这一部分：

{
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
    use: {
        loader: 'file-loader',
        options: {
            name: "[path][name].[ext]"
        }
    }
}

我不知道为什么文件加载器将 javascript 指针生成为“字体”和图像等。也许其他人知道。

【讨论】：