Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @researchgate/worker-loader with all npm packages installed. Try it out:

require("webpack/package.json"); // webpack is a peer dependency. var workerLoader = require("@researchgate/worker-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@researchgate/worker-loader v0.8.2

worker loader module for webpack

npm deps test chat

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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free