@@ -29,7 +29,7 @@ $ npm install worker-loader --save-dev
29
29
** App.js**
30
30
31
31
``` js
32
- import Worker from ' worker-loader!./Worker.js' ;
32
+ import Worker from " worker-loader!./Worker.js" ;
33
33
```
34
34
35
35
### Config
@@ -42,7 +42,7 @@ module.exports = {
42
42
rules: [
43
43
{
44
44
test: / \. worker\. js$ / ,
45
- use: { loader: ' worker-loader' },
45
+ use: { loader: " worker-loader" },
46
46
},
47
47
],
48
48
},
@@ -52,14 +52,14 @@ module.exports = {
52
52
** App.js**
53
53
54
54
``` js
55
- import Worker from ' ./file.worker.js' ;
55
+ import Worker from " ./file.worker.js" ;
56
56
57
57
const worker = new Worker ();
58
58
59
59
worker .postMessage ({ a: 1 });
60
60
worker .onmessage = function (event ) {};
61
61
62
- worker .addEventListener (' message' , function (event ) {});
62
+ worker .addEventListener (" message" , function (event ) {});
63
63
```
64
64
65
65
And run ` webpack ` via your preferred method.
@@ -94,9 +94,9 @@ module.exports = {
94
94
rules: [
95
95
{
96
96
test: / \. worker\. (c| m)? js$ / i ,
97
- loader: ' worker-loader' ,
97
+ loader: " worker-loader" ,
98
98
options: {
99
- worker: ' SharedWorker' ,
99
+ worker: " SharedWorker" ,
100
100
},
101
101
},
102
102
],
@@ -116,14 +116,14 @@ module.exports = {
116
116
rules: [
117
117
{
118
118
test: / \. worker\. (c| m)? js$ / i ,
119
- loader: ' worker-loader' ,
119
+ loader: " worker-loader" ,
120
120
options: {
121
121
worker: {
122
- type: ' SharedWorker' ,
122
+ type: " SharedWorker" ,
123
123
options: {
124
- type: ' classic' ,
125
- credentials: ' omit' ,
126
- name: ' my-custom-worker-name' ,
124
+ type: " classic" ,
125
+ credentials: " omit" ,
126
+ name: " my-custom-worker-name" ,
127
127
},
128
128
},
129
129
},
@@ -151,9 +151,9 @@ module.exports = {
151
151
rules: [
152
152
{
153
153
test: / \. worker\. (c| m)? js$ / i ,
154
- loader: ' worker-loader' ,
154
+ loader: " worker-loader" ,
155
155
options: {
156
- publicPath: ' /scripts/workers/' ,
156
+ publicPath: " /scripts/workers/" ,
157
157
},
158
158
},
159
159
],
@@ -171,7 +171,7 @@ module.exports = {
171
171
rules: [
172
172
{
173
173
test: / \. worker\. (c| m)? js$ / i ,
174
- loader: ' worker-loader' ,
174
+ loader: " worker-loader" ,
175
175
options: {
176
176
publicPath : (pathData , assetInfo ) => {
177
177
return ` /scripts/${ pathData .hash } /workers/` ;
@@ -200,9 +200,9 @@ module.exports = {
200
200
rules: [
201
201
{
202
202
test: / \. worker\. (c| m)? js$ / i ,
203
- loader: ' worker-loader' ,
203
+ loader: " worker-loader" ,
204
204
options: {
205
- filename: ' [name].[contenthash].worker.js' ,
205
+ filename: " [name].[contenthash].worker.js" ,
206
206
},
207
207
},
208
208
],
@@ -220,16 +220,16 @@ module.exports = {
220
220
rules: [
221
221
{
222
222
test: / \. worker\. (c| m)? js$ / i ,
223
- loader: ' worker-loader' ,
223
+ loader: " worker-loader" ,
224
224
options: {
225
225
filename : (pathData ) => {
226
226
if (
227
227
/ \. worker\. (c| m)? js$ / i .test (pathData .chunk .entryModule .resource )
228
228
) {
229
- return ' [name].custom.worker.js' ;
229
+ return " [name].custom.worker.js" ;
230
230
}
231
231
232
- return ' [name].js' ;
232
+ return " [name].js" ;
233
233
},
234
234
},
235
235
},
@@ -253,9 +253,9 @@ module.exports = {
253
253
rules: [
254
254
{
255
255
test: / \. worker\. (c| m)? js$ / i ,
256
- loader: ' worker-loader' ,
256
+ loader: " worker-loader" ,
257
257
options: {
258
- chunkFilename: ' [id].[contenthash].worker.js' ,
258
+ chunkFilename: " [id].[contenthash].worker.js" ,
259
259
},
260
260
},
261
261
],
@@ -280,9 +280,9 @@ module.exports = {
280
280
rules: [
281
281
{
282
282
test: / \. worker\. (c| m)? js$ / i ,
283
- loader: ' worker-loader' ,
283
+ loader: " worker-loader" ,
284
284
options: {
285
- inline: ' fallback' ,
285
+ inline: " fallback" ,
286
286
},
287
287
},
288
288
],
@@ -307,7 +307,7 @@ module.exports = {
307
307
rules: [
308
308
{
309
309
test: / \. worker\. (c| m)? js$ / i ,
310
- loader: ' worker-loader' ,
310
+ loader: " worker-loader" ,
311
311
options: {
312
312
esModule: false ,
313
313
},
@@ -326,26 +326,26 @@ The worker file can import dependencies just like any other file:
326
326
** index.js**
327
327
328
328
``` js
329
- import Worker from ' ./my.worker.js' ;
329
+ import Worker from " ./my.worker.js" ;
330
330
331
331
var worker = new Worker ();
332
332
333
333
var result;
334
334
335
335
worker .onmessage = function (event ) {
336
336
if (! result) {
337
- result = document .createElement (' div' );
338
- result .setAttribute (' id ' , ' result' );
337
+ result = document .createElement (" div" );
338
+ result .setAttribute (" id " , " result" );
339
339
340
340
document .body .append (result);
341
341
}
342
342
343
343
result .innerText = JSON .stringify (event .data );
344
344
};
345
345
346
- const button = document .getElementById (' button' );
346
+ const button = document .getElementById (" button" );
347
347
348
- button .addEventListener (' click' , function () {
348
+ button .addEventListener (" click" , function () {
349
349
worker .postMessage ({ postMessage: true });
350
350
});
351
351
```
@@ -370,7 +370,7 @@ module.exports = {
370
370
rules: [
371
371
{
372
372
test: / \. worker\. (c| m)? js$ / i ,
373
- loader: ' worker-loader' ,
373
+ loader: " worker-loader" ,
374
374
options: {
375
375
esModule: false ,
376
376
},
@@ -387,26 +387,26 @@ You can even use ES6+ features if you have the [`babel-loader`](https://github.c
387
387
** index.js**
388
388
389
389
``` js
390
- import Worker from ' ./my.worker.js' ;
390
+ import Worker from " ./my.worker.js" ;
391
391
392
392
const worker = new Worker ();
393
393
394
394
let result;
395
395
396
396
worker .onmessage = (event ) => {
397
397
if (! result) {
398
- result = document .createElement (' div' );
399
- result .setAttribute (' id ' , ' result' );
398
+ result = document .createElement (" div" );
399
+ result .setAttribute (" id " , " result" );
400
400
401
401
document .body .append (result);
402
402
}
403
403
404
404
result .innerText = JSON .stringify (event .data );
405
405
};
406
406
407
- const button = document .getElementById (' button' );
407
+ const button = document .getElementById (" button" );
408
408
409
- button .addEventListener (' click' , () => {
409
+ button .addEventListener (" click" , () => {
410
410
worker .postMessage ({ postMessage: true });
411
411
});
412
412
```
@@ -433,12 +433,12 @@ module.exports = {
433
433
test: / \. worker\. (c| m)? js$ / i ,
434
434
use: [
435
435
{
436
- loader: ' worker-loader' ,
436
+ loader: " worker-loader" ,
437
437
},
438
438
{
439
- loader: ' babel-loader' ,
439
+ loader: " babel-loader" ,
440
440
options: {
441
- presets: [' @babel/preset-env' ],
441
+ presets: [" @babel/preset-env" ],
442
442
},
443
443
},
444
444
],
@@ -455,7 +455,7 @@ To integrate with TypeScript, you will need to define a custom module for the ex
455
455
** typings/worker-loader.d.ts**
456
456
457
457
``` typescript
458
- declare module ' worker-loader!*' {
458
+ declare module " worker-loader!*" {
459
459
// You need to change `Worker`, if you specified a different value for the `workerType` option
460
460
class WebpackWorker extends Worker {
461
461
constructor ();
@@ -473,23 +473,23 @@ declare module 'worker-loader!*' {
473
473
const ctx: Worker = self as any ;
474
474
475
475
// Post data to parent thread
476
- ctx .postMessage ({ foo: ' foo' });
476
+ ctx .postMessage ({ foo: " foo" });
477
477
478
478
// Respond to message from parent thread
479
- ctx .addEventListener (' message' , (event ) => console .log (event ));
479
+ ctx .addEventListener (" message" , (event ) => console .log (event ));
480
480
```
481
481
482
482
** index.ts**
483
483
484
484
``` typescript
485
- import Worker from ' worker-loader!./Worker' ;
485
+ import Worker from " worker-loader!./Worker" ;
486
486
487
487
const worker = new Worker ();
488
488
489
489
worker .postMessage ({ a: 1 });
490
490
worker .onmessage = (event ) => {};
491
491
492
- worker .addEventListener (' message' , (event ) => {});
492
+ worker .addEventListener (" message" , (event ) => {});
493
493
```
494
494
495
495
### Cross-Origin Policy
@@ -505,7 +505,7 @@ Firstly, you can inline the worker as a blob instead of downloading it as an ext
505
505
** App.js**
506
506
507
507
``` js
508
- import Worker from ' ./file.worker.js' ;
508
+ import Worker from " ./file.worker.js" ;
509
509
```
510
510
511
511
** webpack.config.js**
@@ -515,8 +515,8 @@ module.exports = {
515
515
module: {
516
516
rules: [
517
517
{
518
- loader: ' worker-loader' ,
519
- options: { inline: ' fallback' },
518
+ loader: " worker-loader" ,
519
+ options: { inline: " fallback" },
520
520
},
521
521
],
522
522
},
@@ -529,7 +529,7 @@ Secondly, you may override the base download URL for your worker script via the
529
529
530
530
``` js
531
531
// This will cause the worker to be downloaded from `/workers/file.worker.js`
532
- import Worker from ' ./file.worker.js' ;
532
+ import Worker from " ./file.worker.js" ;
533
533
```
534
534
535
535
** webpack.config.js**
@@ -539,8 +539,8 @@ module.exports = {
539
539
module: {
540
540
rules: [
541
541
{
542
- loader: ' worker-loader' ,
543
- options: { publicPath: ' /workers/' },
542
+ loader: " worker-loader" ,
543
+ options: { publicPath: " /workers/" },
544
544
},
545
545
],
546
546
},
0 commit comments