madole / worker-loader

worker loader module for webpack

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. You will also need to cast the new worker as the Worker type:

typings/custom.d.ts

declare module "worker-loader!*" {
  const content: any;
  export = content;
}

App.ts

import * as MyWorker from "worker-loader!../../worker";
const worker: Worker = new MyWorker();

Maintainers

Tobias Koppers

Joshua Wiens

Bogdan Chadkin