Add support for WebWorker with worker-loader (#3660)

[iansu]

Use worker-loader to turn any file that ends with .worker.js into a WebWorker.

Closes#3660

Here is the sample WebWorker code I used to test this:

// hello.worker.js
let helloInterval;
const sayHello = () => {
self.postMessage({ message: 'Hello' });
};
self.addEventListener('message', event => {
if (event.data.run === true) {
self.postMessage({ status: 'Worker started' });
helloInterval = setInterval(sayHello, 1000);
}
if (event.data.run === false) {
self.postMessage({ status: 'Worker stopped' });
clearInterval(helloInterval);
}
});

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import HelloWorker from './hello.worker.js';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
const helloWorker = new HelloWorker();
let messageCount = 0;
helloWorker.postMessage({ run: true });
helloWorker.onmessage = event => {
if (event.data.status) {
console.log('STATUS', event.data.status);
}
if (event.data.message) {
messageCount += 1;
console.log('MESSAGE', event.data.message);
if (messageCount >= 5) {
helloWorker.postMessage({ run: false });
}
}
}

[imranismail]

This looks good to be merged. I hope we can use this soon to fix janks 👍

[veekas]

Awesome. Looking forward to this getting merged!

[gpolyn]

Nice!

Might be helpful to include notes on use-case, including limitations. As examples,

• handling overlapping tasks for multiple workers, or one or more workers per component and one or more components rendered
• worker termination, e.g., per task or on unmount?

These are questions I have, at least.

[packetstracer]

Cool, the changes work in my current project perfectly @iansu, looking forward to this being merged

[dijs]

Typo. WebWorkers

[dijs]

What is holding this back? Seems like a beautiful solution.

[brettimus]

If there are any loose ends (documentation, etc), I’d be happy to help! Really wanna try this out

[mariusheine]

Nice feature. It did exactly what i needed.

By the way: Would be great to have something like a workerTransform to be able to test web workers in their surrounding with jest. I have not much experience with webpack, babel and jest but i build some simple dirty stuff:
webpack-config.zip

Maybe you could use it to get an idea of what i mean.

[haywirez]

Waiting for this also 🤞

[barrymichaeldoyle]

Looking forward to having this PR resolved and merged 🥇