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>
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.