Use web workers with publicPath from runtime?

[ogonkov]

I'm trying to figure out what is a correct way to use Web Workers with publicPath that we set in runtime from window.__PUBLIC_PATH__

We use custom worker, that wrap whole worker to data url, to work around loading from CDN

import {CustomWorker as Worker} from './CustomWorker';

new Worker(new URL('./foobar.ts', import.meta.url));

But webpack trying to load chunk from local host instead, __webpack_require__.p is https://local.example.com/../, and chunkId is js/foobar.abcd123.js

Our custom worker is make Blob like this, to be passed to Worker later

new Blob([`__webpack_public_path__=${JSON.stringify(window.__PUBLIC_PATH__)};importScript(${JSON.stringify(url)})`], {type: 'application/javascript'})

Adding publicPath override here seems do nothing, while both __webpack_public_path__ and url for importScript contain correct values in debuger.

Should this publicPath override work in case of creating it via Blob, and loading it later via new Worker?

[alexander-akait]

__webpack_public_path__ is a build time variable, you can't use this in such case, what is your default public path for build?

[ogonkov]

Thats what we do now, and worker is loaded from different public path

I will create reproduction

[alexander-akait]

Weird, should work, I tested locally, maybe I missing something (maybe you have something other in your configuration, need to look), feel free to ping me when the reproduction will be ready

[ogonkov]

@alexander-akait I believe i found problem, imports from worker didn't respect publicPath and loaded from localhost instead of publicPath

https://github.com/ogonkov/webpack-webworkers-cdn-demo

[alexander-akait]

@ogonkov Sorry for delay, I see your problem, there are some limitation:

• worker code is another chunk with own runtime code and in own DedicatedWorkerGlobalScope, so you should write __webpack_public_path__ = __PUBLIC_PATH__; line in src/worker/worker.js file
• but there is no window in DedicatedWorkerGlobalScope

So solution - after creating worker you need to call worker.postMessage({ publicPath: __PUBLIC_PATH__ });, inside worker you need to handle it self.onmessage = async ({ data: { publicPath } }) => { if (publicPath) __webpack_public_path__ = publicPath /* other code of worker */ }), it will allow to override public path from window scope inside worker

Note - above is pseudo code, you can change it as you want

[ogonkov]

This actually working, thank you @alexander-akait !

So far it is most clean solution i seen so far, i will try to figure out how to use this with Comlink, but it is really nice starting point

[ogonkov]

@alexander-akait may be it worth to document on Webpack page about Web Workers integration? https://webpack.js.org/guides/web-workers/

[alexander-akait]

@ogonkov yeah, make sense, feel free to send a PR, thanks

[ogonkov]

@alexander-akait webpack/webpack.js.org#7713