Webpack: встроенный обработанный файл шрифта в index.html - PullRequest
Новая
       25

Webpack: встроенный обработанный файл шрифта в index.html

1 голос
/ 24 мая 2019

Я использую html-webpack-plugin, и я хотел бы вставить файл хешированного шрифта в свой пользовательский шаблон index.html.

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
        @font-face {
          font-family: Inter;
          src: url("<%= ?????? %>") format("woff2");
        }
     </style>

И я импортирую шрифт в свой файл ввода app.js, как import "./fonts/inter.woff2"

Я не могу понять, как получить ссылку на обработанный ресурс шрифта.

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Этот вопрос был частью моих усилий по включению некоторого критического CSS, который также содержит мой font-face.

Во-первых, следуйте этому руководству mini-css-extract-plugin, чтобы извлечь CSS на основе записи.Хотя одна вещь, которую я сделал по-другому, я непосредственно предоставил файл SCSS, который содержит мой критический CSS index.scss в виде отдельного чанка записи с именем critical: 

// webpack.config.js
module.exports = {
  entry: {
    app: 'index.js',
    critical: path.resolve(__dirname, "../src/index.scss")
  },

Затем в моем index.html мы будем использоватьОбъект compilation и html-webpack-plugin * * htmlWebpackPlugin в веб-пакете: 

// index.html
<style>
   <%= compilation.assets[htmlWebpackPlugin.files.chunks.critical.css[0]].source() %>
</style>

И вот, у вас это есть - содержимое вашего критического index.scss встроено в ваш index.html!

0 голосов
/ 25 мая 2019

Насколько я знаю, в HTMLWebpackPlugin есть переменная шаблона htmlWebpackPlugin, содержащая ссылки js & css, она не будет содержать все ресурсы веб-пакета.

У меня есть альтернативное решение вместо импорта шрифтас помощью js импортируйте css с использованием шрифта, таким образом, вы можете настроить, чтобы веб-пакет вставлял css в html.

Итак, это будет выглядеть так: 

// index.js
import 'styles.css';


// styles.css
@font-face {
    font-family: Inter;
    src: url("./font.woff") format("woff2");
}
...