What Does worker-loader Inline Do?

Question

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?

Answer 1

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 [email protected]. Now that [email protected] is out though, there's less and less reason to use inline loaders.

What's more, the worker loader isn't needed in [email protected].

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.