Как предварительно загрузить Google Fonts из CDN с помощью веб-пакета

Question

Моя цель - импортировать шрифты с помощью

@import url('https://fonts.googleapis.com/css?family=Poppins:i,100,200,300);

в мой файл .scss, а затем предварительно загрузить все шрифты с помощью preload-webpack-plugin

---

После развертывания моего пакета применяются шрифты Google, и запрос шрифтов выглядит так:

Сравните с запросом, использующим @font-faceв файле .scss получите шрифты, которые я загружаю на локальный, а затем обслуживайте самостоятельно:

После имени файла следует только имя второго файла.name Я определил в file-loader конфигурацию:

exports.font = {
  test:   /\.(woff|woff2|ttf|eot)$/,
  loader: 'file-loader',
  query:  {
    name: '[name]-[hash:6].[ext]',
  },
};

Это все еще разумно для меня, поэтому я думаю, что, когда Webpack создает график зависимостей, css-loader интерпретирует @import и url(), тогда file-loader дублирует файлы в нашу папку dist, но если источник из внешнего источника, file-loader не будет работать на этом.

---

Опять же, сравните запросы с CDN и локальными, Источники раздел в Devtool показывает мне:

• CDN:

• Local:

Когда я запрашиваю шрифты из CDN, появляется новая папка gstatic до того, как ядобавьте preload-webpack-plugin , шрифты запрашиваются динамически, когда встречаются с новым семейством / стилем шрифтов на новых страницах, после того, как я добавлю preload-webpack-plugin , шрифты предварительно загруженытолько за способ отправки запросов на локальные шрифты.

exports.preloadWebpack = new PreloadWebpackPlugin({
  rel:           'preload',
  include:       'allAssets',
  fileWhitelist: [/\.woff/, /\.woff2/, /\.ttf/],
  as:            'font',
});

Любая помощь приветствуется !!

Answer 1

Вы можете использовать: плагин Google Fonts Webpack,

и установите его, используя npm следующим образом:

npm install @beyonk/google-fonts-webpack-plugin

Подробнее info .