Question

我正在使用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"

我不知道如何获取已处理字体资产的参考。

Answer 1

据我所知，HTMLWebpackPlugin具有一个模板变量htmlWebpackPlugin，该模板变量具有js和css链接，它不会包含所有的webpack资产。

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

所以，它看起来像这样：

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


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

Answer 2

这个问题是我努力内嵌一些也包含我的mini-css-extract-plugin的关键CSS的一部分。

首先，follow this index.scss指南根据条目提取CSS。尽管我做了不同的事情，但我还是直接提供了包含关键CSS critical的SCSS文件作为名为// webpack.config.js module.exports = { entry: { app: 'index.js', critical: path.resolve(__dirname, "../src/index.scss") },的单独条目块：

index.html

然后在我的compilation中，我们将利用webpack的html-webpack-plugin和htmlWebpackPlugin的{{1}}对象：

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

就可以了-关键index.scss的内容已内嵌在index.html中！

Webpack：index.html中的内联处理字体文件

2 个答案: