Webpack项目中使用Web Worker

Posted 2023-05-10

参考技术A 详细看 https://juejin.im/post/5acf348151882579ef4f5a77
官方 https://webpack.docschina.org/loaders/worker-loader/

项目工程目录下安装loader,目地是让Webpack识别worker文件

向webpack配置文件中添加loader的配置

test.worker.js文件如下,

app.js文件如下

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

【中文标题】WebPack 5 与使用 React/Typescript 的 Web 工作者

【英文标题】：WebPack 5 with Web worker using React/Typescript

【发布时间】：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"); |   , []);

【参考方案1】：

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

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

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

见here。