WebPack 5 与使用 React/Typescript 的 Web 工作者答案

【问题标题】：WebPack 5 with Web worker using React/TypescriptWebPack 5 与使用 React/Typescript 的 Web 工作者
【发布时间】：2021-12-26 00:22:41
【问题描述】：

如何让 web worker 与 create-react-app、Typescript 和 Webpack 5 一起工作？文档非常有限，我找不到任何好的解释。我不想使用 webpack-loader 等。

我正在使用 webpack 5 建议的 API 实例化 worker。我已经让它与 ComLink 一起工作，但它使用了我不想要的 RPC（进一步 ComLink 无法复制套接字或 rxjs 可观察数据结构）。

我想创建 web worker，以便我可以通过 websockets 流式传输数据，非常感谢任何指针。

 const worker = new Worker(new URL('./test.worker.ts', import.meta.url));
 worker.postMessage("test");

但它会抛出异常。

模块解析失败：意外令牌 (16:64) 处理文件这些装载机：* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/babel-loader/lib/index.js 你可能需要一个额外的 loader 来处理这些加载器的结果。 | |
React.useEffect(() => {
const worker = new Worker(new URL('./test.worker.ts', import.meta.url)); |     worker.postMessage("test"); |   }, []);

【问题讨论】：

标签： reactjs typescript webpack create-react-app web-worker

【解决方案1】：

当前 create-react-app 仍在使用 Webpack 4。这就是您的代码在当前 React 设置中无法运行的原因。

您可以手动弹出和升级 Webpack，但我认为它不能开箱即用，因为它是主要版本升级。

我建议等到 React 18 发布，因为它应该包含 Webpack 5。因为我可以在 create-react-app 中看到版本已经更新> Github repo.

见here。

【讨论】：