/worker-plugin

🐳 Adds native Web Worker bundling support to Webpack.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

worker-plugin

👩‍🏭 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 & 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