Why is webpack emitting font files that are actually javascript?

I'm trying to integrate font-awesome into a webpack project through SASS. However am running into a strange issue where the font files are being emitted like this:

3cbb9abfb7d5d9b3ede7.woff

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

The referenced fa-regular-400.woff is also emitted at that location, however the emitted CSS references those weird javascript font files, which obviously aren't loaded by the browser as they are invalid.

The only reference to a similar issue I found was on this thread: https://github.com/rails/webpacker/issues/2680. However the solution there is specific to some other technology and not applicable in this case.

Here's the emitted directory:

So, here's my webpack rules:

{
    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]"
        }
    }
}

And I import font-awesome like this in scss:

$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";