@@ -29,7 +29,7 @@ $ npm install worker-loader --save-dev
2929** App.js**
3030
3131``` js
32- import Worker from ' worker-loader!./Worker.js' ;
32+ import Worker from " worker-loader!./Worker.js" ;
3333```
3434
3535### Config
@@ -42,7 +42,7 @@ module.exports = {
4242 rules: [
4343 {
4444 test: / \. worker\. js$ / ,
45- use: { loader: ' worker-loader' },
45+ use: { loader: " worker-loader" },
4646 },
4747 ],
4848 },
@@ -52,14 +52,14 @@ module.exports = {
5252** App.js**
5353
5454``` js
55- import Worker from ' ./file.worker.js' ;
55+ import Worker from " ./file.worker.js" ;
5656
5757const worker = new Worker ();
5858
5959worker .postMessage ({ a: 1 });
6060worker .onmessage = function (event ) {};
6161
62- worker .addEventListener (' message' , function (event ) {});
62+ worker .addEventListener (" message" , function (event ) {});
6363```
6464
6565And run ` webpack ` via your preferred method.
@@ -94,9 +94,9 @@ module.exports = {
9494 rules: [
9595 {
9696 test: / \. worker\. (c| m)? js$ / i ,
97- loader: ' worker-loader' ,
97+ loader: " worker-loader" ,
9898 options: {
99- worker: ' SharedWorker' ,
99+ worker: " SharedWorker" ,
100100 },
101101 },
102102 ],
@@ -116,14 +116,14 @@ module.exports = {
116116 rules: [
117117 {
118118 test: / \. worker\. (c| m)? js$ / i ,
119- loader: ' worker-loader' ,
119+ loader: " worker-loader" ,
120120 options: {
121121 worker: {
122- type: ' SharedWorker' ,
122+ type: " SharedWorker" ,
123123 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" ,
127127 },
128128 },
129129 },
@@ -151,9 +151,9 @@ module.exports = {
151151 rules: [
152152 {
153153 test: / \. worker\. (c| m)? js$ / i ,
154- loader: ' worker-loader' ,
154+ loader: " worker-loader" ,
155155 options: {
156- publicPath: ' /scripts/workers/' ,
156+ publicPath: " /scripts/workers/" ,
157157 },
158158 },
159159 ],
@@ -171,7 +171,7 @@ module.exports = {
171171 rules: [
172172 {
173173 test: / \. worker\. (c| m)? js$ / i ,
174- loader: ' worker-loader' ,
174+ loader: " worker-loader" ,
175175 options: {
176176 publicPath : (pathData , assetInfo ) => {
177177 return ` /scripts/${ pathData .hash } /workers/` ;
@@ -200,9 +200,9 @@ module.exports = {
200200 rules: [
201201 {
202202 test: / \. worker\. (c| m)? js$ / i ,
203- loader: ' worker-loader' ,
203+ loader: " worker-loader" ,
204204 options: {
205- filename: ' [name].[contenthash].worker.js' ,
205+ filename: " [name].[contenthash].worker.js" ,
206206 },
207207 },
208208 ],
@@ -220,16 +220,16 @@ module.exports = {
220220 rules: [
221221 {
222222 test: / \. worker\. (c| m)? js$ / i ,
223- loader: ' worker-loader' ,
223+ loader: " worker-loader" ,
224224 options: {
225225 filename : (pathData ) => {
226226 if (
227227 / \. worker\. (c| m)? js$ / i .test (pathData .chunk .entryModule .resource )
228228 ) {
229- return ' [name].custom.worker.js' ;
229+ return " [name].custom.worker.js" ;
230230 }
231231
232- return ' [name].js' ;
232+ return " [name].js" ;
233233 },
234234 },
235235 },
@@ -253,9 +253,9 @@ module.exports = {
253253 rules: [
254254 {
255255 test: / \. worker\. (c| m)? js$ / i ,
256- loader: ' worker-loader' ,
256+ loader: " worker-loader" ,
257257 options: {
258- chunkFilename: ' [id].[contenthash].worker.js' ,
258+ chunkFilename: " [id].[contenthash].worker.js" ,
259259 },
260260 },
261261 ],
@@ -280,9 +280,9 @@ module.exports = {
280280 rules: [
281281 {
282282 test: / \. worker\. (c| m)? js$ / i ,
283- loader: ' worker-loader' ,
283+ loader: " worker-loader" ,
284284 options: {
285- inline: ' fallback' ,
285+ inline: " fallback" ,
286286 },
287287 },
288288 ],
@@ -307,7 +307,7 @@ module.exports = {
307307 rules: [
308308 {
309309 test: / \. worker\. (c| m)? js$ / i ,
310- loader: ' worker-loader' ,
310+ loader: " worker-loader" ,
311311 options: {
312312 esModule: false ,
313313 },
@@ -326,26 +326,26 @@ The worker file can import dependencies just like any other file:
326326** index.js**
327327
328328``` js
329- import Worker from ' ./my.worker.js' ;
329+ import Worker from " ./my.worker.js" ;
330330
331331var worker = new Worker ();
332332
333333var result;
334334
335335worker .onmessage = function (event ) {
336336 if (! result) {
337- result = document .createElement (' div' );
338- result .setAttribute (' id ' , ' result' );
337+ result = document .createElement (" div" );
338+ result .setAttribute (" id " , " result" );
339339
340340 document .body .append (result);
341341 }
342342
343343 result .innerText = JSON .stringify (event .data );
344344};
345345
346- const button = document .getElementById (' button' );
346+ const button = document .getElementById (" button" );
347347
348- button .addEventListener (' click' , function () {
348+ button .addEventListener (" click" , function () {
349349 worker .postMessage ({ postMessage: true });
350350});
351351```
@@ -370,7 +370,7 @@ module.exports = {
370370 rules: [
371371 {
372372 test: / \. worker\. (c| m)? js$ / i ,
373- loader: ' worker-loader' ,
373+ loader: " worker-loader" ,
374374 options: {
375375 esModule: false ,
376376 },
@@ -387,26 +387,26 @@ You can even use ES6+ features if you have the [`babel-loader`](https://github.c
387387** index.js**
388388
389389``` js
390- import Worker from ' ./my.worker.js' ;
390+ import Worker from " ./my.worker.js" ;
391391
392392const worker = new Worker ();
393393
394394let result;
395395
396396worker .onmessage = (event ) => {
397397 if (! result) {
398- result = document .createElement (' div' );
399- result .setAttribute (' id ' , ' result' );
398+ result = document .createElement (" div" );
399+ result .setAttribute (" id " , " result" );
400400
401401 document .body .append (result);
402402 }
403403
404404 result .innerText = JSON .stringify (event .data );
405405};
406406
407- const button = document .getElementById (' button' );
407+ const button = document .getElementById (" button" );
408408
409- button .addEventListener (' click' , () => {
409+ button .addEventListener (" click" , () => {
410410 worker .postMessage ({ postMessage: true });
411411});
412412```
@@ -433,12 +433,12 @@ module.exports = {
433433 test: / \. worker\. (c| m)? js$ / i ,
434434 use: [
435435 {
436- loader: ' worker-loader' ,
436+ loader: " worker-loader" ,
437437 },
438438 {
439- loader: ' babel-loader' ,
439+ loader: " babel-loader" ,
440440 options: {
441- presets: [' @babel/preset-env' ],
441+ presets: [" @babel/preset-env" ],
442442 },
443443 },
444444 ],
@@ -455,7 +455,7 @@ To integrate with TypeScript, you will need to define a custom module for the ex
455455** typings/worker-loader.d.ts**
456456
457457``` typescript
458- declare module ' worker-loader!*' {
458+ declare module " worker-loader!*" {
459459 // You need to change `Worker`, if you specified a different value for the `workerType` option
460460 class WebpackWorker extends Worker {
461461 constructor ();
@@ -473,23 +473,23 @@ declare module 'worker-loader!*' {
473473const ctx: Worker = self as any ;
474474
475475// Post data to parent thread
476- ctx .postMessage ({ foo: ' foo' });
476+ ctx .postMessage ({ foo: " foo" });
477477
478478// Respond to message from parent thread
479- ctx .addEventListener (' message' , (event ) => console .log (event ));
479+ ctx .addEventListener (" message" , (event ) => console .log (event ));
480480```
481481
482482** index.ts**
483483
484484``` typescript
485- import Worker from ' worker-loader!./Worker' ;
485+ import Worker from " worker-loader!./Worker" ;
486486
487487const worker = new Worker ();
488488
489489worker .postMessage ({ a: 1 });
490490worker .onmessage = (event ) => {};
491491
492- worker .addEventListener (' message' , (event ) => {});
492+ worker .addEventListener (" message" , (event ) => {});
493493```
494494
495495### Cross-Origin Policy
@@ -505,7 +505,7 @@ Firstly, you can inline the worker as a blob instead of downloading it as an ext
505505** App.js**
506506
507507``` js
508- import Worker from ' ./file.worker.js' ;
508+ import Worker from " ./file.worker.js" ;
509509```
510510
511511** webpack.config.js**
@@ -515,8 +515,8 @@ module.exports = {
515515 module: {
516516 rules: [
517517 {
518- loader: ' worker-loader' ,
519- options: { inline: ' fallback' },
518+ loader: " worker-loader" ,
519+ options: { inline: " fallback" },
520520 },
521521 ],
522522 },
@@ -529,7 +529,7 @@ Secondly, you may override the base download URL for your worker script via the
529529
530530``` js
531531// 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" ;
533533```
534534
535535** webpack.config.js**
@@ -539,8 +539,8 @@ module.exports = {
539539 module: {
540540 rules: [
541541 {
542- loader: ' worker-loader' ,
543- options: { publicPath: ' /workers/' },
542+ loader: " worker-loader" ,
543+ options: { publicPath: " /workers/" },
544544 },
545545 ],
546546 },
0 commit comments