Как предварительно загрузить шрифт CSS @ font-face, который входит в пакет webpack4 + babel? - PullRequest
Новая
       14

Как предварительно загрузить шрифт CSS @ font-face, который входит в пакет webpack4 + babel?

3 голосов
/ 28 марта 2019

У меня есть настройка 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"
    ]
}

Запуск 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и шрифты.

Есть идеи, как заставить это работать?

1 Ответ

0 голосов
/ 28 марта 2019

Я полагаю, что для предварительной загрузки файла шрифта вы можете просто вручную указать <link /> в вашем index.html файле: 

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

См. это для некоторых деталей.

...