web-workers.mdx

title	Web Workers
sort	21
contributors	chenxsan

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

Syntax

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

// or customize the chunk name with magic comments
// see https://webpack.js.org/api/module-methods/#magic-comments
new Worker(
  /* webpackChunkName: "foo-worker" */ new URL('./worker.js', import.meta.url)
);

The syntax was chosen to allow running code without bundler, it is also available in native ECMAScript modules in the browser.

Note that while the Worker API suggests that Worker constructor would accept a string representing the URL of the script, in webpack 5 you can only use URL instead.

W> Using a variable in the Worker constructor is not supported by webpack. For example, the following code will not work: const url = new URL('./path/to/worker.ts', import.meta.url); const worker = new Worker(url);. This is because webpack cannot analyse the syntax statically. It is important to be aware of this limitation when using Worker syntax with webpack.

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

self.onmessage = ({ data: { question } }) => {
  self.postMessage({
    answer: 42,
  });
};

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.

Advanced: Cross-Domain and Dynamic Web Workers

In some setups you might need your worker script to be hosted on a different origin
(for example, using a CDN or micro-frontend).
Webpack supports this, but you must make the worker aware of the correct public path.

Setting a dynamic public path

Inside the worker, explicitly set the same public path used by the main bundle:

// worker.js
/* global __webpack_public_path__, __webpack_require__ */

// Ensure the worker knows where to load chunks from
__webpack_public_path__ = __webpack_require__.p = self.location.origin + '/assets/';