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?

When you use a loader in webpack you are creating rules for the importing of files. Using the inline worker when loading the module you are overruling the module loader in your `webpack.config.js`. You should only import the Worker using. `import Worker from 'worker.js';`. From the docs it looks like `inline` is just for a fallback for browsers that don't support workers which is a rare exception these days. https://caniuse.com/webworkers. It creates a separate file, but it shouldn't be used if using a browser with WebWorker support. — synthet1c, Apr 17 '21 at 09:44
well worker is another js interpreter instance that evaluates some code and the code is passed into the worker either as a blob from the main process or it points to the path which is your "separate file" — webduvet, Apr 23 '21 at 23:11
inline notation just specifies what loader should be used for that particular imported file. — webduvet, Apr 23 '21 at 23:15

score 2 · Accepted Answer · answered Apr 23 '21 at 19:22

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.

What Does worker-loader Inline Do?

1 Answers1