我刚刚将我们项目中的旧的css和js构建过程从grunt（和less中的css）迁移到webpack 5（和scss中的css），一切似乎都很好。然而，有一个问题：有时候与其看起来像这样

下面是DevTools中的心脏：

.fa-heart:before {
    content: "";
}

该fontawesome webfonts似乎不正确加载，而是加载在这样

当我在DevTools中检查心脏时，它看起来像这样

.fa-heart:before {
    content: "";
}

我本以为

.fa-heart:before {
    content: "\f004";
}

当我在DevTools中手动更改它时，它可以工作。
当我在浏览器中启动灯塔审计时，可以重现这一点：最后一次装载时，灯塔是这样的。
老实说，我不知道该怎么做，甚至谷歌这个问题。我试图使用webfontloader加载字体，但这并没有帮助的问题。
我在我的main.scss中包含了这样的fontawesome：

@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@import "~@fortawesome/fontawesome-pro/scss/light";
@import "~@fortawesome/fontawesome-pro/scss/solid";

以下是我的webpack配置的简化版本（条目较少）：

module.exports = {
  entry: {
    './dist/styles.min': { import: './src/sass/main.scss' },
    './dist/scripts.min.js': { import: './src/js/scripts.js' },
  }
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery", "jquery"],
        },
      },
      {
        test: /\.s?[ac]ss$/i,
        use: [
          // Compiles Sass to CSS
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { debug: false, useBuiltIns: "usage", corejs: 3 }], "@babel/preset-react"],
            plugins: [["@babel/plugin-transform-runtime", { corejs: 3 }]],
          },
        },
      },
      {
        test: /(ignore)/,
        use: {
          loader: "ignore-loader",
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|ttf|eot|woff2?)$/i,
        use: [
           {
            loader: "file-loader",
            options: {
              outputPath: "dist/assets/",
              publicPath: "/assets/",
            },
          },
        ],
      },
    ]
  },
  output: {
    path: __dirname,
    filename: "[name]?[contenthash]",
  },
  resolve: {
    extensions: [".jsx", ".js", ".json"],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css?[contenthash]",
    }),
  ],
optimization: {
    minimize: !DEV_MODE,
    minimizer: [
      "...",
      new TerserPlugin({ extractComments: false }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      cacheGroups: {
        polyfills: {
          test: /[\\/]node_modules[\\/](@babel|core-js|regenerator|promise)/,
          name: "./dist/polyfills.min.js",
          chunks: "all",
        },
        vendor: {
          test: /[\\/]node_modules[\\/](slick|bootstrap|jquery)/,
          name: "./dist/vendor.min.js",
          chunks: "all",
        },
      },
    },
  },
}