#Web Workers

Rspack provides built-in support for Web Workers, which means you don't need any loader to use Web Workers directly.

#Usage

Basic Worker creation syntax:

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

You can customize the Worker's chunk name through the name property (the property value must be statically analyzable). This name will replace the [name] placeholder in the generated chunk filename:

new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker',
});

#Additional syntax

In addition to new Worker(), Rspack also supports the following syntax by default:

• new SharedWorker(), see SharedWorker

const sharedWorker = new SharedWorker(
  new URL('./shared-worker.js', import.meta.url),
);
sharedWorker.port.start();

• import { Worker } from "node:worker_threads": commonly used in Node.js environments, see Worker threads

import { Worker } from 'node:worker_threads';

const worker = new Worker(new URL('./node-worker.js', import.meta.url));

• navigator.serviceWorker.register(): used to register Service Workers, see ServiceWorkerContainer

navigator.serviceWorker.register('./sw.js').then(registration => {
  console.log('Service worker registration succeeded:', registration);
});

To support additional custom syntax, you can configure it through module.parser.javascript.worker.

#Examples

For usage examples, see:

• examples/worker
• examples/monaco-editor-js
• examples/monaco-editor-ts-react

#Notes

1. Note that new Worker can also accept a string representation of a URL, but only passing in URLs is supported in Rspack.

2. Rspack does not support the use of variables in new Worker. For example, the following code will not work:

   const url = new URL('./path/to/worker.js', import.meta.url);
   const worker = new Worker(url);

   This is because Rspack cannot statically analyze the syntax. Please be sure to note this limitation when using the Worker syntax in Rspack.

3. Not support /* webpackEntryOptions: { filename: "workers/[name].js" } */ magic comments for now.

#worker-loader

Rspack also supports worker-loader. However, since worker-loader is no longer maintained, please use worker-rspack-loader as a replacement.

Use resolveLoader to replace worker-loader with worker-rspack-loader:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

export default {
  resolveLoader: {
    alias: {
      'worker-loader': require.resolve('worker-rspack-loader'),
    },
  },
};