How to preload a CSS @font-face font that is bundled by webpack4+babel? : <p>I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the <code>dist</code> folder on build and its filename is hashed. I want to be able to preload this font.</p>

<p>Here is my LESS file:</p>

<pre><code>@font-face {
    font-family: 'Test';
    src: url('../fonts/test.ttf') format('truetype');
    font-weight: 400;
}
</code></pre>

<p>I have tried the following approaches but so far with no success:</p>

<ol>
<li>Add custom import to my app's main JS file.</li>
</ol>

<pre><code>import(/* webpackPreload: true */ "../fonts/test.ttf");
</code></pre>

<p>Here is my <code>.babelrc</code> file:</p>

<pre><code>{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}
</code></pre>

<p>Running <code>webpack</code> does not produce preload directions anywhere as far as I can see in the outputted html - I have searched through the <code>dist</code> folder contents and found nothing.</p>

<ol start="2">
<li>preload-webpack-plugin</li>
</ol>

<p>I add this to my <code>webpack.config.js</code> file:</p>

<pre><code>plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {
      if (/\.css$/.test(entry)) return 'style';
      if (/\.woff$/.test(entry)) return 'font';
      if (/\.png$/.test(entry)) return 'image';
      return 'script';
    }
  })
]
</code></pre>

<p>This creates preloads for the JS script file bundles but not for the CSS and fonts.</p>

<p>Any ideas on how to get this to work?</p>
