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

Question

我有一个用于 React Web 应用程序的 webpack4+babel bundler 设置。在 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 文件夹内容，但什么也没找到。

预加载 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

通过安装版本 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],

    }),