Skip to content
πŸ‘©β€πŸ­ Adds native Web Worker bundling support to Webpack.
JavaScript
Branch: master
Clone or download
Latest commit fd20f41 Feb 21, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src sharedWorker defaults to false Feb 21, 2020
test Update test to pass sharedWorker:true Feb 21, 2020
.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 `sharedWorker` option Feb 21, 2020
package.json 3.2.0 Aug 27, 2019

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, but when bundled the result is supported in all browsers that support Web Workers - all the way back to IE 10!

Workers with fully dynamic URLs, Blob URLs, data URLs or with no { 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);

Note: in order to ensure WorkerPlugin bundles your worker, make sure you're passing a string URL/filename to the Worker constructor. WorkerPlugin cannot bundle workers with dynamic/variable filenames, Blob or data URLs - it will leave them unmodified and print a warning during your build.

Options

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

globalObject (string | false)

WorkerPlugin will print a warning 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 (array)

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({ <...> })
      ]
    })
  ]
  <...>
}

sharedWorker (boolean)

If set to true, this option enables the bundling of SharedWorker:

const shared = new SharedWorker('./my-shared-worker.js', { type: 'module' });

preserveTypeModule (boolean)

workerType (string)

Normally, WorkerPlugin will transform new Worker('./a.js', { type: 'module' }) to completely remove the type option, outputting something like new Worker('a.worker.js'). This allows the plugin to compile Module Workers to Classic Workers, which are supported in all browsers.

To instead retain {type:'module'} in bundled output, set the preserveTypeModule option to true:

  plugins: [
    new WorkerPlugin({
      preserveTypeModule: true
    })
  ]

Similarly, if you need to have WorkerPlugin output a specific type value, use the workerType option to spefify it:

  plugins: [
    new WorkerPlugin({
      workerType: 'foo'  // note: this isn't a thing!
    })
  ]

License

Apache-2.0

You can’t perform that action at this time.