worker-loader
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); });
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/worker-loader