如何使用worker-loader在create-react-app中使用Web Workers？

Question

我正在尝试在我的React应用程序中实现Web Workers，以在多个选项卡上共享单个WebSockets连接。我使用worker-loader依赖项在Web Workers中加载。

不幸的是，我甚至无法让一个简单的专职网络工作者工作。

App.jsx：

import React, { Component } from 'react';

// eslint-disable-next-line
import myWorker from 'worker-loader!./worker.js';

class App extends Component {
  constructor(props) {
    super();

    this.state = {};
  }

componentWillMount() {
    if(window.SharedWorker) {
      console.log(myWorker);
      myWorker.port.postMessage('Hello worker');

      myWorker.port.onmessage = function(e) {
        console.log('Message received from worker');
        console.log(e.data);
      }
    }

worker.js：

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

加载页面时，会出现以下webpack错误：

我无法使用worker-loader的配置样式用法，因为这需要对webpack配置进行一些更改。由于create-react-app，无法编辑此配置。如果我弹出create-react-app，我可以，但确实有一些缺点。

为什么它不起作用？有人有什么想法吗？

提前致谢，

麦克

Answer 1

由于@KevBot表示我必须创建一个新的Worker实例：

// eslint-disable-next-line
import Worker from 'worker-loader!./worker.js';

let myWorker = new Worker();