My understanding was that the following Webpack worker-loader config:
...
module: {
rules: [
{
test: /worker\.js/,
loader: "worker-loader",
options: {
inline: 'fallback',
}
}
{ ... }
]
}
...
would bundle a worker file (named worker.js in this case) into the output file with other JS files, resulting in a single-file output. Then loading the file in the App using
import Worker from "worker-loader!./worker.js";
would successfully load the Worker. After testing it, it seems that I am misunderstood. inline
does not package the worker into a single file; it creates a separate file in the output directory.
So, what exactly is inline
doing then?
Inline loader syntax exists to allow you to override the default configuration of the worker in your project in a specific instance. This could include things like assigning a file name to output for the webworker.
It was much more useful in Webpack@4.x. Now that Webpack@5.x is out though, there's less and less reason to use inline loaders.
What's more, the worker loader isn't needed in Webpack@5.x
.
But now for some perhaps unwelcome news - workers must always be in their own independent files unless you load them as blobs, which could have security implications for your site/application.