Preloads images as script and assets that are not in the config

[Tofandel]

This is my config

  new PreloadWebpackPlugin({
    rel: 'preload',
    include: ['chunk-vendors', 'app'],
  }),

And the output

<link href="/css/age-gate.7b50d0a2.css" rel="preload" as="style">
<link href="/css/filepond.4a740c40.css" rel="preload" as="style">
<link href="/css/home.bebc5034.css" rel="preload" as="style">
<link href="/css/profile.f65713e7.css" rel="preload" as="style">
<link href="/css/recover.03a0e9c6.css" rel="preload" as="style">
<link href="/css/register.03a0e9c6.css" rel="preload" as="style">
<link href="/css/reset.03a0e9c6.css" rel="preload" as="style">
<link href="/img/staropramen-code-upload.dddbfe8c.png" rel="preload" as="script">
<link href="/img/staropramen-gameplay-bg.7994297a.jpg" rel="preload" as="script">
<link href="/img/staropramen-gameplay.fbf554b4.png" rel="preload" as="script">
<link href="/img/staropramen-prize-1.3e2c7064.png" rel="preload" as="script">
<link href="/img/staropramen-prize-2.d8f7e2b5.png" rel="preload" as="script">
<link href="/img/staropramen-prize-3.7ca5d10d.png" rel="preload" as="script">
<link href="/img/staropramen-products.7b055b44.png" rel="preload" as="script">
<link href="/img/staropramen-top-1.3166b1bb.png" rel="preload" as="script">
<link href="/img/staropramen-top-2.1a4b787f.png" rel="preload" as="script">
<link href="/img/staropramen-top-3.cd3e4c21.png" rel="preload" as="script">
<link href="/img/staropramen-top-background.9c018782.jpg" rel="preload" as="script">
<link href="/js/age-gate.9f33f640.js" rel="preload" as="script">
<link href="/js/code-upload.53d3511b.js" rel="preload" as="script">
<link href="/js/filepond.2a5b5c23.js" rel="preload" as="script">
<link href="/js/home.597ddb30.js" rel="preload" as="script">
<link href="/js/not-found.c0d5b062.js" rel="preload" as="script">
<link href="/js/profile.da945b71.js" rel="preload" as="script">
<link href="/js/recover.1685671a.js" rel="preload" as="script">
<link href="/js/register.80d10696.js" rel="preload" as="script">
<link href="/js/registration-status.ea7cd7d2.js" rel="preload" as="script">
<link href="/js/reset.300794f1.js" rel="preload" as="script">
<link href="/manifest.json" rel="preload" as="script">
<link href="/sitemap.xml" rel="preload" as="script">

Which is completely wrong, am I missing something?

Edit:

After adding a blacklist I managed to remove images and stuff, but the chunks are still not filtered correctly

  new PreloadWebpackPlugin({
    rel: 'preload',
    fileBlacklist: [/\.(png|jpe?g|xml|json)/],
    include: ['chunk-vendors', 'app'],
  }),

<link href="/css/age-gate.7b50d0a2.css" rel="preload" as="style">
<link href="/css/filepond.4a740c40.css" rel="preload" as="style">
<link href="/css/home.bebc5034.css" rel="preload" as="style">
<link href="/css/profile.f65713e7.css" rel="preload" as="style">
<link href="/css/recover.03a0e9c6.css" rel="preload" as="style">
<link href="/css/register.03a0e9c6.css" rel="preload" as="style">
<link href="/css/reset.03a0e9c6.css" rel="preload" as="style">
<link href="/js/age-gate.e3a04a39.js" rel="preload" as="script">
<link href="/js/code-upload.0079298a.js" rel="preload" as="script">
<link href="/js/filepond.2a5b5c23.js" rel="preload" as="script">
<link href="/js/home.843bef30.js" rel="preload" as="script">
<link href="/js/not-found.4edda045.js" rel="preload" as="script">
<link href="/js/profile.833ea73d.js" rel="preload" as="script">
<link href="/js/recover.c6698a96.js" rel="preload" as="script">
<link href="/js/register.252c43b0.js" rel="preload" as="script">
<link href="/js/registration-status.f4c99ba8.js" rel="preload" as="script">
<link href="/js/reset.92daf21c.js" rel="preload" as="script">

Using webpack 5 and the latest html webpack plugin

[tomchen]

If you mean some chunks do not appear in the list, then use include: 'all',

[Tofandel]

Nope, the doc says that include will only output the chunks listed in include but it's not the case, pretty much it does include: 'all' even if you specify something else