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

Question

我正在尝试通过 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";

Answer 1

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

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

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