Generated worker files are missing from compilation.chunks

[bebraw]

I'm currently writing a small plugin to allow prefetching workers written with the plugin (the principle works). During this work, I noticed that webpack compilation.chunks is missing the worker files.

Here's my current plugin code:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const insertLinksIntoHead = require('./insert-links-into-head');

class PrefetchPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    const { include } = this.options;

    // TODO: Match using include
    compiler.hooks.compilation.tap('PrefetchPlugin', (compilation) => {
      console.log('include', include);

      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('PrefetchPlugin', (data, cb) => {
        const links = []; // TODO: Populate with HTML for prefetching

        const allFiles = compilation.chunks.reduce((accumulated, chunk) => {
          return accumulated.concat(chunk.files);
        }, []);

        console.log('chunks', allFiles);

        data.html = insertLinksIntoHead({
          links,
          html: data.html,
        });

        cb(null, data);
      });
    });
  }
}

module.exports = PrefetchPlugin;

That helper module is directly from https://github.com/GoogleChromeLabs/preload-webpack-plugin .

I peeked at the code and I noticed threads-plugin is using a child compiler within a loader to write the worker files. My feeling is that there's something missing that would communicate the emitted files to the parent compilation.

What's the technical reason for using a child compiler? Have you encountered something like this before?

[bebraw]

I solved this outside of webpack with a tiny script to write the tags. That said, it's still probably a good idea to see if we can find a way to fix the issue within child compilation. I tried adding chunks from the child to the parent but for a reason I don't understand yet they didn't show up yet (they likely got lost during webpack processing and there's some specific way to do this).

For reference, https://github.com/prateekbh/babel-esm-plugin is doing something along those lines.

[andywer]

Thanks for the link, @bebraw!

Looks like we can just port this section here.

[bebraw]

Yeah, I tried something simpler but maybe it needs the whole section and it has to use the right hook specifically as over there. Likely that's the reason why it didn't work in my test.