Webpack Worker Loader: How to make it work as a dependency?

Question

I have my index.html importing a dependency.

<script src="node_modules/myModule/app.js"></script> 

myModule/app.js

var WebWorker = require('worker-loader!./worker');
window.WebWorker = new WebWorker();

The worker exists in node_modules/myModule/worker.js

When I run 'webpack' it works, as they are on the same folder. If I change anything in the path, webpack wouldn't pick up the webworker code as needed.

Problems comes when using this modules as a dependency, because I need to place worker.js in the same route as the index.html.

The alternative is using a Blob and insert the worker as an Inline dependency, but they are not supported on IE11.

Thus, I don't know if there's a good option to make it work.

Answer 1

you should choose a naming pattern for your workers, let's say:

myWorkerModule.worker.js

And then configure the webpack worker loader to handle all the file with that pattern. Here is the relevant part of the webpack.config:

module: {
    rules: [
        {
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' }
        }
    ]
}

Now when you need that worker module as a dependency, simply put

var myWorkerModule = require('./myWorkerModule.worker')

or

import myWorkerModule from './myWorkerModule.worker'

Hope it helps.