Vue-cli correct processing of <link rel="preload/prefetch">

user_489553 0
Viewed 3169

How is it possible to make webpack correctly process assets in <link rel="preload/prefetch"> tags?

For example, when using inside /public/index.html

<link rel="preload" href="@/assets/fonts/myfont.woff2" as="font" crossorigin>

webpack should fingerprint the file and copy to /fonts just as it would do in case of

url('~@/assets/fonts/myfont.woff2'); /* inside css */

Resulting in

<link rel="preload" href="/fonts/myfont.$HASH$.woff2" as="font" crossorigin>
vue-cli-3 vue.js webpack assets preload
1 Answers

The solution:

<link rel="preload" href="<%= require('@/assets/fonts/myfont.woff2') %>" as="font" crossorigin>

Be aware that if you for example want to

<link rel="icon" href="<%= require('@/assets/favicon.png') %>" type="image/png">

webpack will probably url-inline that favicon (if it's small enought) according to default webpack config, that vue-cli generates for you.

user_4895530
Related