How to use the Worker filename generated by multi-compiler mode in the second stage?

[thomastay]

Similar to #14349 but I want to be able to use the output of the first stage of the multi-compiler mode in the second stage.

Let's say I have a simplified webpack config:

[
  {
    name: "worker",
    target: "webworker",
    entry: "./worker.js",
    output: {
      path: path.join(__dirname, "dist"),
      filename: "worker-[contenthash].js"
    },
  },
  {
    name: "app",
    target: "browser",
    entry: "./app",
    output: {
      path: path.join(__dirname, "dist"),
      filename: "index.js"
    },
    dependencies: ["worker"],
  },
]

Then when we build, the first output, "worker" will be built and generate a file called dist/worker-abc123.js.

And inside of index.js I have:

new Worker("<INSERT WORKER OUTPUT FILE HERE>")

How do I make it such that index.js will produce new Worker("./worker-abc123.js")?

To be honest, ignore the "dist" part if not relevant. I'm only really interested in passing the output filename of one into another. It's not even really about workers.

Is this possible?

Workarounds

Currently I have some ideas for workarounds, namely having a plugin that searches the dist folder and finds the right file, and injects it into the index.html page. Or maybe using ManifestPlugin to generate a manifest that the second build looks for. But that seems like a lot.

[alexander-akait]

Here example:

const path = require("path");
const webpack = require("webpack");

let workerEntry;

module.exports = [
	{
		devtool: false,
		mode: "development",
		name: "worker",
		target: "webworker",
		entry: "./src/worker.js",
		output: {
			path: path.join(__dirname, "dist-temp"),
			filename: "worker-[contenthash].js"
		},
		plugins: [
			{
				apply: compiler => {
					compiler.hooks.done.tap('MyWebpackPlugin', function(stats) {
						const entrypoints = stats.toJson().entrypoints;

						Object.keys(entrypoints).forEach((entryName) => {
							const entryFiles = entrypoints[entryName].assets;
							const entryFilename = entryFiles[0].name;

							if (!workerEntry && entryName === "main") {
								workerEntry = path.join(stats.compilation.outputOptions.path, entryFilename);
							}
						});
					});
				}
			}
		]
	},
	{
		devtool: false,
		mode: "development",
		name: "app",
		target: "web",
		entry: "./src/app.js",
		output: {
			path: path.join(__dirname, "dist"),
			filename: "index.js"
		},
		dependencies: ["worker"],
		plugins: [
			{
				apply: compiler => {
					compiler.hooks.beforeRun.tap('MyWebpackPlugin', function(stats) {
						new webpack.DefinePlugin({
							WORKER_URL: JSON.stringify(workerEntry)
						}).apply(compiler);
					});
				}
			}
		]
	}
];

and code:

const myWorker = new Worker(new URL(WORKER_URL, import.meta.url));

[thomastay]

Thanks, that makes sense, using the Define Plugin to set a ENV variable is a great idea