Reactjs 网页包：index.html中的内联处理字体文件_Reactjs_Webpack_Html Webpack Plugin

Reactjs 网页包：index.html中的内联处理字体文件

reactjs webpack

Reactjs 网页包：index.html中的内联处理字体文件,reactjs,webpack,html-webpack-plugin,Reactjs,Webpack,Html Webpack Plugin,我正在使用html网页包插件，我想将哈希字体文件插入到我的自定义index.html模板中 index.html <!DOCTYPE html> <html lang="en"> <head> <style> @font-face { font-family: Inter; src: url("<%= ?????? %>") format("woff2");

我正在使用

html网页包插件

，我想将哈希字体文件插入到我的自定义

index.html

模板中

index.html

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


@字体{
字体系列：Inter；
src:url（“”）格式（“woff2”）；
}

我在我的输入文件

app.js

中导入字体，就像

import./font/inter.woff2“

我不知道如何获取已处理字体资源的引用

据我所知，HTMLWebpackPlugin有一个模板变量

HTMLWebpackPlugin

具有js和css链接，它不会包含所有的网页包资产

我有一个替代的解决方案，不是用js导入字体，而是导入一个具有字体用法的css，这样，您可以配置webpack将css注入html

所以，它看起来是这样的：

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


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

这个问题是我努力内联一些关键CSS的一部分，这些CSS也包含我的

字体
首先，mini css extract plugin
guide根据条目提取css。虽然我做了一件不同的事情，但我直接提供了包含关键CSSindex.SCSS
的SCSS文件，作为名为critical
的单独条目块：
// webpack.config.js
module.exports = {
  entry: {
    app: 'index.js',
    critical: path.resolve(__dirname, "../src/index.scss")
  },

然后，在我的index.html
中，我们将利用网页包的编译
和html网页包插件
的htmlWebpackPlugin
对象：
// index.html
<style>
   <%= compilation.assets[htmlWebpackPlugin.files.chunks.critical.css[0]].source() %>
</style>

//index.html

这就是你的关键index.scs
的内容，它内联在你的index.html
中