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

Question

我有一个用于React Web应用程序的webpack4 + babel捆绑器设置。在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"
    ]
}

webpack据我在输出的html中看到的任何地方，运行都不会产生预加载方向-我搜索了dist文件夹的内容，但未发现任何内容。

2. preload-webpack-plugin

我将此添加到我的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

通过安装版本 3beta 并使用 while list 选项，能够使其在 webpack4 上运行：

yarn add -D preload-webpack-plugin@3.0.0-beta.3

new PreloadWebpackPlugin({
        rel: 'preload',
        as: 'font',
        include: 'allAssets',
        fileWhitelist: [/\.(woff2?|eot|ttf|otf)(\?.*)?$/i],

    }),

Answer 2

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

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

请参阅此了解一些详细信息。