worker-plugin

What is worker-plugin?

The worker-plugin npm package is a Webpack plugin that allows you to use Web Workers with Webpack seamlessly. It simplifies the process of bundling and using Web Workers in your application by handling the necessary configurations and dependencies.

What are worker-plugin's main functionalities?

Automatic Web Worker bundling

This feature allows you to automatically bundle Web Workers with your Webpack configuration. By adding the WorkerPlugin to your Webpack plugins array, you can seamlessly use Web Workers in your application without additional configuration.

const WorkerPlugin = require('worker-plugin');

module.exports = {
  // Other Webpack configuration options...
  plugins: [
    new WorkerPlugin()
  ]
};

Inline Web Worker support

This feature allows you to create Web Workers inline using the new URL syntax. The WorkerPlugin handles the necessary bundling and ensures that the Web Worker is correctly loaded and executed.

const worker = new Worker(new URL('./worker.js', import.meta.url));
worker.postMessage('Hello, worker!');

TypeScript support

The WorkerPlugin also supports TypeScript, allowing you to create and use Web Workers written in TypeScript. This feature ensures that your TypeScript Web Workers are correctly transpiled and bundled.

const worker = new Worker(new URL('./worker.ts', import.meta.url));
worker.postMessage('Hello, TypeScript worker!');

Other packages similar to worker-plugin

worker-loader

The worker-loader package is another Webpack loader that allows you to bundle Web Workers. It provides similar functionality to worker-plugin but requires more manual configuration. With worker-loader, you need to explicitly specify the loader in your Webpack configuration and import statements.

comlink

Comlink is a library that simplifies the use of Web Workers by providing a proxy-based API. It allows you to call functions in Web Workers as if they were local functions. While Comlink focuses on simplifying the communication between the main thread and Web Workers, worker-plugin focuses on bundling and configuration.

threads.js

Threads.js is a library that provides a high-level API for working with Web Workers and threads in JavaScript. It offers features like thread pools and message-based communication. Compared to worker-plugin, threads.js provides more advanced threading capabilities and abstractions.

README

👩‍🏭 worker-plugin

Automatically bundle & compile Web Workers within Webpack.

Features

Automatically compiles modules loaded in Web Workers:

const worker = new Worker('./foo.js', { type: 'module' });
                          ^^^^^^^^^^
                          gets bundled using webpack

The best part? That worker constructor works just fine without bundling turned on too.

Workers created from Blob & data URLs or without the { type:'module' } option are left unchanged.

Installation

npm install -D worker-plugin

Then drop it into your webpack.config.js:

+ const WorkerPlugin = require('worker-plugin');

module.exports = {
  <...>
  plugins: [
+    new WorkerPlugin()
  ]
  <...>
}

Usage

worker.js: (our worker module)

// This is a module worker, so we can use imports (in the browser too!)
import { calculatePi } from './some-other-module';

addEventListener('message', event => {
  postMessage(calculatePi(event.data));
});

main.js: (our demo, on the main thread)

const piWorker = new Worker('./worker.js', { type: 'module' });
piWorker.onmessage = event => {
  console.log('pi: ' + event.data);
};
piWorker.postMessage(42);

Options

In most cases, no options are necessary to use WorkerPlugin.

globalObject

WorkerPlugin will warn you if your Webpack configuration has output.globalObject set to window, since doing so breaks Hot Module Replacement in web workers.

If you're not using HMR and want to disable this warning, pass globalObject:false:

new WorkerPlugin({
  // disable warnings about "window" breaking HMR:
  globalObject: false
})

To configure the value of output.globalObject for WorkerPlugin's internal Webpack Compiler, set globalObject to any String:

new WorkerPlugin({
  // use "self" as the global object when receiving hot updates.
  globalObject: 'self' // <-- this is the default value
})

plugins

By default, WorkerPlugin doesn't run any of your configured Webpack plugins when bundling worker code - this avoids running things like html-webpack-plugin twice. For cases where it's necessary to apply a plugin to Worker code, use the plugins option.

Here you can specify the names of plugins to "copy" from your existing Webpack configuration, or provide specific plugins to apply only to worker code:

module.exports = {
  <...>
  plugins: [
    // an example of a plugin already being used:
    new SomeExistingPlugin({ <...> }),

    new WorkerPlugin({
      plugins: [
        // A string here will copy the named plugin from your configuration:
        'SomeExistingPlugin',
        
        // Or you can specify a plugin directly, only applied to Worker code:
        new SomePluginToApplyOnlyToWorkers({ <...> })
      ]
    })
  ]
  <...>
}

License

Apache-2.0