Setting workerChunkLoading and outputModule options for a specific web worker while maintaining Webpack defaults for others

[rishabhjain9191]

I have a web application that employs multiple web workers, and I'm currently facing a configuration challenge regarding one particular web worker.
Specifically, I would like to set the workerChunkLoading option to import and enable outputModule(experiments.outputModule: true) for this specific worker. However, I want to ensure that the default Webpack settings are maintained for the rest of the workers.

I have explored the documentation and experimented with different configurations, but I haven't been able to achieve the desired outcome. I would greatly appreciate any insights or suggestions on how to accomplish this task effectively.

[alexander-akait]

Do you want to set workerChunkLoading only for some workers, right? I am afraid we it is impossible to do without multi compiler mode, you can do this:

module.exports = [
  {
    name: "my-worker"
    entry: "./my-specific.worker.js",
    target: ["webworker", "es2020"],
    experiments: { outputModules: true },
    output: { modules: true, filename: "[name].js" }
  },
  {
    target: "web",
    dependecies: ["my-worker"]
    // Other options
    
  }
];

So you will bundle specific loaders firstly, then bundle your application

[rishabhjain9191]

Thanks @alexander-akait
This seems to be working. One followup question on this: How to use the bundle that is created in first step(my-worker) into second step(main) ?

This is my current webpack configuration:

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

module.exports = [
  {
    mode: "development",
    name: "my-worker",
    entry: "./worker.js",
    target: ["webworker", "es2020"],
    experiments: { outputModule: true },
    output: {
      module: true,
      libraryTarget: "module",
      filename: "worker-[contenthash].js",
      path: path.resolve(__dirname, "dist"),
    },
  },
  {
    mode: "development",
    dependencies: ["my-worker"],
    target: ["web"],
    entry: ["./main.js"],
    output: {
      path: path.resolve(__dirname, "dist"),
      clean: false,
      filename: "main.js",
      publicPath: "/dist/",
    },
    target: "browserslist: last 2 Chrome versions",
  },
];

I tried following this: #17244 but seems not to be working.
My repo is here: https://github.com/rishabhjain9191/webpack-worker-poc

[alexander-akait]

@rishabhjain9191 Try this:

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

let myWorkerURL = "dist/[fullhash]/my-worker/worker.mjs";

module.exports = [
  {
    mode: "development",
    devtool: false,
    name: "my-worker",
    entry: "./worker.js",
    target: ["webworker", "es2020"],
    experiments: { outputModule: true },
    output: {
      module: true,
      filename: "worker.mjs",
      path: path.resolve(__dirname, path.dirname(myWorkerURL)),
    },
    plugins: [
      {
        apply: (compiler) => {
          compiler.hooks.done.tap("MyPlugin", (stats) => {
            myWorkerURL = myWorkerURL.replace(/\[fullhash]/, stats.hash);
          });
        }
      }
    ]
  },
  {
    mode: "development",
    devtool: false,
    dependencies: ["my-worker"],
    target: ["browserslist: last 2 Chrome versions", "web"],
    entry: ["./main.js"],
    output: {
      path: path.resolve(__dirname, "dist"),
      clean: false,
      filename: "main.js",
      publicPath: "/dist/",
    },
    plugins: [
      new webpack.DefinePlugin({
        WORKER_URL: webpack.DefinePlugin.runtimeValue(() => JSON.stringify(myWorkerURL)),
      })
    ]
  },
];

Here:

• Support for the fullhash placeholder for long term cache, if you don't need it just remove a small plugin (if you need another placholders you can get them fom stats)
• Added mjs, if you have mixed regular JS and ESM, better to change extension, but it is just a recommendation
• devtool: false just for debbuging and show that it works, if you can remove it
• Use DefinePlugin and runtimeValue to calculate it lazy

Also please use:

const myWorker = new Worker(WORKER_URL, {
  type: "module",
});

without new URL(...) to keep it as non analizable (otherwise webpack will create an asset module).

Yeah, DX is not very good, but it works, also we want to improve DX:

• Allow to use new URL(/* webpackIgnore: true */ "./path/to/file.js", improt.meta.url) - ESM Module Output #17121
• We are thinking about implementing [compier:name:stats.output.path] placeholders to reuse them in other compilers

[rishabhjain9191]

Thank you so much @alexander-akait
This works 🎉