webworkify-webpack-dropin

webworkify-webpack

launch a web worker that can require() in the browser with webpack

inspired by webworkify

example

First, a main.js file will launch the worker.js and print its output:

import work from 'webworkify-webpack';
 
let w = work(require('./worker.js'));
w.addEventListener('message', event => {
    console.log(event.data);
});
 
w.postMessage(4); // send the worker a message

then worker.js can require() modules of its own. The worker function lives inside of the module.exports:

import gamma from 'gamma'
 
module.exports = function worker (self) { // use named function instead of anonymous to prevent possible issues (check the second caveat)
    self.addEventListener('message', (event) => {
        const startNum = parseInt(event.data); // ev.data=4 from main.js
        
        setInterval(() => {
            const r = startNum / Math.random() - 1;
            self.postMessage([ startNum, r, gamma(r) ]);
        }, 500);
    });
};

Now after webpackifying this example, the console will contain output from the worker:

[ 4, 0.09162078520553618, 10.421030346237066 ]
[ 4, 2.026562457360466, 1.011522336481017 ]
[ 4, 3.1853125018703716, 2.3887589540750214 ]
[ 4, 5.6989969260510005, 72.40768854476167 ]
[ 4, 8.679491643020487, 20427.19357947782 ]
[ 4, 0.8528139834191428, 1.1098187157762498 ]
[ 4, 8.068322137547542, 5785.928308309402 ]
...

methods

import work from 'webworkify-webpack'

let w = work(require(modulePath))

Return a new web worker from the module at modulePath.

The file at modulePath should export its worker code in module.exports as a function that will be run with no arguments.

Note that all the code outside of the module.exports function will be run in the main thread too so don't put any computationally intensive code in that part. It is necessary for the main code to require() the worker code to fetch the module reference and load modulePath's dependency graph into the bundle output.

install

With npm do:

npm install webworkify-webpack --save

caveats

• While developing make sure not to set webpack's devtool option to be with some eval configuration because from 1.1.0 version it won't work - check #7
• When passing anonymous functions to webworkify-webpack, naming them can prevent potential issues - #9, #10

license

MIT