npm i -D worker-loaderApp.js
import Worker from 'worker-loader!./Worker.js'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) {})| Name | Type | Default | Description |
|---|---|---|---|
name |
{String} |
[hash].worker.js |
Set a custom name for the output script |
inline |
{Boolean} |
false |
Inline the worker as a BLOB |
fallback |
{Boolean} |
false |
Require a fallback for non-worker supporting environments |
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' }
}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
fallbackparameter asfalse
webpack.config.js
{
loader: 'worker-loader'
options: { inline: true, fallback: false }
}Require a fallback for non-worker supporting environments
webpack.config.js
{
loader: 'worker-loader'
options: { fallback: false }
}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)) ℹ️ You can even use ES2015 Modules if you have the
babel-loaderconfigured.
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))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) => {});|
Bogdan Chadkin |
Juho Vepsäläinen |
Joshua Wiens |
Michael Ciniawsky |
Alexander Krasnoyarov |