title: How to preload a CSS @font-face font that is bundled by webpack4+babel?
body: <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>