Preload and Prefetch config options

[dvago]

Hi there,

First of all, thanks for keeping up with this project.

I'm reaching you out as I'm trying to achieve prefetch and preload for different assets (e.g. I'd like to preload all the .css files but prefetch .js files).

Accordingly with some random post I could potentially use this syntax within the webpack plugins section:

new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'style',
    include: 'allChunks',
    fileBlacklist: [/\.map|.js/],
  }),
  new PreloadWebpackPlugin({
    rel: 'prefetch',
    include: 'allChunks',
    fileBlacklist: [/\.css/],
  }),

Unfortunately this doesn't achieve anything as the first instance of PreloadWebpackPlugin gets completely overwritten by the second one.

I'm wondering if you already have a solution, otherwise it could be good to either transform the options into an array and pass multiple configuration for different type of files or extend the current object to allow multiple rel and related rules.

It shouldn't be so difficult to implement but please let me know.

Thanks in advance.

[lkarmelo]

I tried your config and it works, resulting html has prefetch and preload links. I myself have config which preloads fonts and prefetches js and css and it works. Perhaps something else doesn't work in yout case. Are you using version 2?

     new PreloadWebpackPlugin({
        rel: 'preload',
        as(entry) {
          if (/\.(woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/.test(entry)) {
            return 'font';
          }
        },
        fileWhitelist: [/\.(woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/],
        include: 'allAssets'
      }),
      new PreloadWebpackPlugin({
        rel: 'prefetch',
      }),