javascriptwebwebpackworkerworker-loader

What Does worker-loader Inline Do?


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?


Solution

  • 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.