非create-react-app创建的React项目Web Worker无法使用问题

项目环境与目录结构 #

• Webpack 版本 ≥5，无需使用 worker-loader
• webpack-dev-server 版本 4.*
• 未通过 create-react-app 创建 React 项目

目录结构：

src
  vumi
    MapLayer.js
  workers
    main.js

代码实现 #

MapLayer.js 中的代码 #

const myWorker = new Worker("../workers/main.js");
console.log("worker is", myWorker);
myWorker.onerror = (e) => {
  console.log("there is error", e);
};
myWorker.postMessage(["hi", "i am pravin"]);

myWorker.onmessage = (e) => {
  let message = e.data;
  console.log("Message received from worker", message);
};

workers/main.js 中的代码 #

onmessage = (e) => {
  console.log("Message received from main script");
  console.log(e.data);
  const workerResult = `Result: ${e.data[0]} ${e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

问题现象 #

执行代码后，控制台无任何 Worker 相关日志输出，怀疑 Worker 文件未被正确加载。

tsconfig.json 配置 #

{
  "extends": "create-extension/tsconfig/tsconfig.json",

  "include": ["./src/**/*"],
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "lib": ["dom"],

    // Additional TypeScript error reporting checks are enabled by default to improve code quality.
    // Enable/disable these checks as necessary to suit your coding preferences or work with
    // existing code
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true
  }
}

希望能得到问题排查的帮助。

内容的提问来源于stack exchange，提问作者Pravin Poudel