Question

我有一个用于React Web应用程序的webpack4 + babel捆绑程序设置。在LESS文件中，我引用了本地字体。该字体将被复制到构建版本的dist文件夹中，并且其文件名会被散列。我希望能够预加载此字体。

这是我的LESS文件：

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

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

将自定义导入添加到应用的主JS文件中。

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

这是我的.babelrc文件：

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

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

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列表选项，可以使其在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">

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

Answer 3

发布此帖子是因为我认为这可能会帮助处于类似职位的人-我意识到这不能解决所描述的问题。

有同样的问题-不需要哈希我的字体文件，但URL的另一部分不是静态的。有点骇人听闻，但解决了我的问题。也许可以帮助某人。从理论上讲，您可以创建自己的hash-id并将其设置为htmlWebpack-plugin变量。

在我的index.html

<html>
  <head>
    <link rel="preload" href="<%= htmlWebpackPlugin.options.woffSrc %>" as="font" type="font/woff" crossorigin>
    <link rel="preload" href="<%= htmlWebpackPlugin.options.woff2Src %>" as="font" type="font/woff2" crossorigin>

    //rest of html

webpack.prod.conf.js-更新了HtmlWebpackPlugin

plugins: [
  new HtmlWebpackPlugin({
    ...config,
    woffSrc: `https://url.to.my.page.com/${ASSETS_FOLDER}/static/assets/fonts/GilroyRegular.woff`,
    woff2Src: `https://url.to.my.page.com/${ASSETS_FOLDER}/static/assets/fonts/GilroyExtraBold.woff2`
  })
]

我认为字体文件不需要散列-因为该散列主要用于控制缓存，因此我不会更改字体文件，因此我在Webpack文件加载器中启用了该散列。如果我错了，请纠正我。

具有装载程序：

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 2000,
    name: utils.assetsPath('assets/fonts/[name].[ext]')
  }
}

由于构建错误而无法使preload-webpack-plugin正常工作，并且两天后又厌倦了故障排除。

Answer 4

我找到了解决方法。这并不令人愉快，但我认为总比没有好。在这里，我只想预加载woff和woff2文件。

new PreloadWebpackPlugin({
      rel: 'preload',
      include: 'allAssets',
      fileBlacklist: [/\.(js|ttf|png|eot|jpe?g|css|svg)/]
    }),

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

4 个答案: