提问人:Javiliano 提问时间:8/10/2023 更新时间:8/10/2023 访问量:27
预加载的链接字体文件名被丑化/散列并导致不匹配
preloaded link font filename is uglified/hashed and causes mismatch
问:
我在 webpack 开发服务器中遇到了一个奇怪的问题,其中通过链接预加载头标签从我的公共文件夹静态提供的字体在其文件名中被丑化/散列。
然而,在我的@font面声明中,这种哈希处理并不令人愉快,因此存在不匹配,导致浏览器无法将预加载的字体与稍后使用的字体相匹配。
这是我的 index.html 文件中预加载的链接标签:
<link rel="preload" href="../public/Raleway-VariableFont_wght.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
这是@font面宣言:
@font-face {
font-family: 'Raleway Font';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/Raleway-VariableFont_wght.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
(这些导入都有效,即使路径略有不同。出于某种原因,链接标签的路径需要其中的“public”文件夹名称,而字体的路径则不需要。
我正在通过 webpack-dev-server 运行我的开发服务器。
现在,由于某种原因,当我查看网络选项卡时,预加载的字体将作为“http://localhost:8080/5f724b831a87738ee6ca.woff2”。第二种字体用于 font-face 声明,但这次是其正常的非丑化文件名:“http://localhost:8080/Raleway-VariableFont_wght.woff2”。
因此,存在不匹配,我在 Chrome 中收到控制台警告,指出预加载的字体在几秒钟内未使用。
如何防止 webpack-dev-server 在预加载情况下提供带有哈希文件名的字体?
包含该预加载链接标签的 index.html 在我的 webpack 配置中使用,如下所示:
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
我已经阅读了很多与 devServer 的静态文件服务相关的 webpack 文档,但找不到与文件名哈希相关的任何内容。目前对我来说,为什么我的预加载链接标签会被散列以及导致它的原因,这对我来说是一个完全的谜。 任何帮助将不胜感激!
答: 暂无答案
评论