Worker Loader

This loader registers the script as Web Worker.

Install

npm i -D worker-loader

or

yarn add worker-loader --dev

Usage

Import the worker file:

// main.js
var MyWorker = require("worker-loader!./file.js");

var worker = new MyWorker();
worker.postMessage({a: 1});
worker.onmessage = function(event) {...};
worker.addEventListener("message", function(event) {...});

You can also inline the worker as a blob with the inline parameter:

var MyWorker = require("worker-loader?inline!./myWorker.js");

Inline mode will also create chunks for browsers without supporting of inline workers, to disable this behavior just set fallback parameter as false:

var MyWorker = require("worker-loader?inline&fallback=false!./myWorker.js");

To set a custom name for the output script, use the name parameter. The name may contain the string [hash], which will be replaced with a content-dependent hash for caching purposes. For example:

var MyWorker = require("worker-loader?name=outputWorkerName.[hash].js!./myWorker.js");

The worker file can import dependencies just like any other file:

// file.js
var _ = require('lodash')

var o = {foo: 'foo'}

_.has(o, 'foo') // true

// Post data to parent thread
self.postMessage({foo: 'foo'}) 

// Respond to message from parent thread
self.addEventListener('message', function(event){ console.log(event); });  

You can even use ES6 modules if you have the babel-loader configured:

// file.js
import _ from 'lodash'

let o = {foo: 'foo'}

_.has(o, 'foo') // true

// Post data to parent thread
self.postMessage({foo: 'foo'}) 

// Respond to message from parent thread
self.addEventListener('message', (event) => { console.log(event); });

Integrating with TypeScript

To integrate with TypeScript, you will need to define a custom module for the exports of your worker:

typings/custom.d.ts

declare module "worker-loader!*" {
  class WebpackWorker extends Worker {
    constructor();
  }

  export = WebpackWorker;
}

myWorker.ts

const ctx: Worker = self as any;

// Post data to parent thread
ctx.postMessage({foo: "foo"}) 

// Respond to message from parent thread
ctx.addEventListener("message", (event) => { console.log(event); });

main.ts

import MyWorker = require("worker-loader!./myWorker");

const worker = new MyWorker();
worker.postMessage({a: 1});
worker.onmessage = (event) => {...};
worker.addEventListener("message", (event) => {...});

Maintainers

Tobias Koppers

Joshua Wiens

Bogdan Chadkin