小编Fra*_*ank的帖子

我有一个用于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和字体创建预加载。

关于如何使它起作用的任何想法？