Use with Web Workers

[SabrinaJewson]

If this plugin is enabled and you try to import a worker like so:

const worker = new Worker(new URL('./worker.js', import.meta.url));

It will compile completely fine, but it appears that this plugin completely removes the worker when attempting to inline the scripts. This leads to a 404 in the console as the page loads, because there is no file worker.js. I think ideally this plugin would transparently inline all worker scripts asset/source-style then load them as Blobs somehow, but I don't know how feasible that is.

Environment and package version

Webpack 5.60.0, html-webpack-plugin 5.5.0, html-inline-script-webpack-plugin 2.0.2

[icelam]

Hi @KaiJewson, thank you for submitting this issue.

I am able to reproduce the issue with both:

• webpack v4 with worker-loader
• webpack v5

I have already identified the root cause and is now working on the fix. Before the fix is published, this plugin provides a feature to define the scope of script files to be processed, and it should be able to serve as a temporary workaround.

[icelam]

@KaiJewson
I just release a new version (2.0.3) which should be able to resolve the issue that worker.js is missing in the bundle.

However, for your suggestion on making worker files inline as BLOB, I think it isn't something that can be easily implemented in this plugin. As this plugin is depending on html-webpack-plugin, and it only aims for editing HTML tags. If it is really a required use case to make the worker file inline for some reason, I am able to achieve this with help of assets-loader:

Webpack config

(babel-loader can also be added if you need to support legacy browsers)
https://github.com/icelam/html-inline-script-webpack-plugin/blob/master/__tests__/cases/inline-web-worker/webpack.config.ts#L23

JS source

https://github.com/icelam/html-inline-script-webpack-plugin/blob/master/__tests__/cases/inline-web-worker/fixtures/index.js#L3

---

Let me know the issue is resolved or not.

[SabrinaJewson]

Including the worker script non-inline works perfectly, thank you very much! But I'm having troubles with including it as a blob: setting the resource type to asset/source causes Webpack to not process the file at all, meaning that imports don't get resolved and it doesn't get minified. Would there be any way to work around that? I suppose I could try and run Webpack twice or something, but that's not ideal.

[icelam]

How about consider using [worker-loader](https://github.com/webpack-contrib/worker-loader) which has been deprecated for webpack 5? They provided a inline mode which allow the web worker to be inlined as BLOB.

Inline option provided by worker-loader:
https://github.com/webpack-contrib/worker-loader#inline

[SabrinaJewson]

I'd prefer not to, but this is a problem with Webpack now, not this project. So thanks a lot for the fix and the help!