🐳 Adds native Web Worker bundling support to Webpack.
Switch branches/tags
Clone or download
Latest commit 023f466 Dec 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add plugins option Dec 6, 2018
test Add tests for plugins option Dec 6, 2018
.editorconfig Initial release! Sep 18, 2018
.gitignore Use prepack rather than prepublishOnly Sep 24, 2018
.travis.yml Initial release! Sep 18, 2018
CONTRIBUTING.md Initial release! Sep 18, 2018
LICENSE Initial release! Sep 18, 2018
README.md Document the new "plugins" option Dec 14, 2018
package.json 3.0.0 Dec 14, 2018

README.md

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