ag-grid is proud to partner with webpack

worker-loader

This loader registers the script as Web Worker

Install

npm i -D worker-loader

Usage

##

App.js

import Worker from 'worker-loader!./Worker.js'

Config

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

App.js

import Worker from './file.worker.js'

const worker = new Worker()

worker.postMessage({ a: 1 })
worker.onmessage = function (event) {}

worker.addEventListener("message", function (event) {})

Options

Name
Type
Default
Description
Name
name
Type
{String}
Default
[hash].worker.js
Description
Set a custom name for the output script
Name
inline
Type
{Boolean}
Default
false
Description
Inline the worker as a BLOB
Name
fallback
Type
{Boolean}
Default
false
Description
Require a fallback for non-worker supporting environments

name

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

webpack.config.js*

{
  loader: 'worker-loader',
  options: { name: 'WorkerName.[hash].js' }
}

inline

You can also inline the worker as a BLOB with the inline parameter

webpack.config.js

{
  loader: 'worker-loader',
  options: { inline: true }
}

ℹ️ Inline mode will also create chunks for browsers without support for inline workers, to disable this behavior just set fallback parameter as false

webpack.config.js

{
  loader: 'worker-loader'
  options: { inline: true, fallback: false }
}

fallback

Require a fallback for non-worker supporting environments

webpack.config.js

{
  loader: 'worker-loader'
  options: { fallback: false }
}

Examples

The worker file can import dependencies just like any other file

Worker.js

const _ = require('lodash')

const obj = { foo: 'foo' }

_.has(obj, 'foo')

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

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

Integrating with ES2015 Modules

ℹ️ You can even use ES2015 Modules if you have the babel-loader configured.

Worker.js

import _ from 'lodash'

const obj = { foo: 'foo' }

_.has(obj, 'foo')

// 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;
}

Worker.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));

App.ts

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

const worker = new MyWorker();

worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};

worker.addEventListener("message", (event) => {});

Maintainers


Bogdan Chadkin


      Juho Vepsäläinen


      Joshua Wiens


      Michael Ciniawsky


      Alexander Krasnoyarov