自 webpack 构建以来，Fontawesome webfonts 有时无法加载

Question

我刚刚将我们项目中的旧 css 和 js 构建过程从 grunt（和 less 中的 css）迁移到 webpack 5（和 css 中的 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",
        },
      },
    },
  },
}

Answer 1

"\f004" is actually equivalent to ""，但字符 "" 可能会出现，因为您的 CSS 缺少 @charset "UTF-8" 规则。它可能会在最小化过程中被剥离。

它可能发生在 terser-webpack-plugin (see this issue) 中。您可以尝试将以下内容添加到您的 webpack 配置中：

TerserPlugin({
  terserOptions: { output: { ascii_only: true } }
})

更多信息：https://medium.com/@thinkpanda_75045/webpack-with-unicode-7a2c5eb22afd

类似问题：https://github.com/FortAwesome/Font-Awesome/issues/17644