Web Workers

As of webpack 5, you can use Web Workers without worker-loader.

Syntax

new Worker(new URL('./worker.js', import.meta.url));

The syntax was chosen to allow running code without bundler since using new Worker) is available in native ECMAScript modules in the browser (https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) but in webpack, worker.js and the files that worker.js imports can be bundled.

Example

src/index.js

const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
worker.postMessage({
  question:
    'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};

src/deep-thought.js

import { getAnswer } from './answer'
self.onmessage = ({ data: { question } }) => {
  self.postMessage({
    answer: getAnswer(),
  });
};

src/answer.js

export default getAnswer() {
  return 42
}

In this case, deep-thought.js and answer.js will be bundled for use in the web worker.

Node.js

Similar syntax is supported in Node.js (>= 12.17.0):

import { Worker } from 'worker_threads';

new Worker(new URL('./worker.js', import.meta.url));

Note that this is only available in ESM. Worker in CommonJS syntax is not supported by either webpack or Node.js.

1 Contributor