如何预加载由webpack4 + babel捆绑的CSS @ font-face字体？

Question

我有一个webpack4 + babel捆绑器设置为反应Web应用程序。在LESS文件中，我引用了本地字体。此字体将被复制到构建时的dist文件夹中，并对其文件名进行哈希处理。我希望能够预加载这种字体。

这是我的LESS文件：

@font-face {
    font-family: 'Test';
    src: url('../fonts/test.ttf') format('truetype');
    font-weight: 400;
}

我尝试了以下方法但到目前为止没有成功：

1. 将自定义导入添加到我的应用程序的主JS文件中。

import(/* webpackPreload: true */ "../fonts/test.ttf");

这是我的.babelrc文件：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

在输出的html中，运行webpack不会产生任何预加载方向 - 我已经搜索了dist文件夹内容并且一无所获。

2. 预压的WebPack-插件

我将此添加到我的webpack.config.js文件中：

plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {
      if (/\.css$/.test(entry)) return 'style';
      if (/\.woff$/.test(entry)) return 'font';
      if (/\.png$/.test(entry)) return 'image';
      return 'script';
    }
  })
]

这会为JS脚本文件包创建预加载，但不会为CSS和字体创建预加载。

有关如何使其工作的任何想法？

Answer 1

我相信预加载字体文件，您可以在<link />文件中手动指定index.html：

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

有关详细信息，请参阅this。