问题标签 [worker-loader]

我正在按照worker-loader文档中的描述配置我的项目，并且我能够使用正确的 d.ts 让 TS 代码 intel 工作。

但是，在 webpack 构建期间它会抛出一个错误，我不明白为什么。

我的工作人员文件内容test.worker.ts：

申请入口index.ts

最后这是我的webpack.config.js

任何帮助深表感谢。

谢谢 ：）

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

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

应用程序.jsx：

工人.js：

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

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

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

提前致谢，

麦克风

我webpack用来整理一个使用Web Workers. 为此，我正在使用worker-loader加载程序。

我做了一个最小的 plunk来演示我的环境（我还将粘贴下面的代码以供后代使用）。

问题是，工作文件的解析没有按预期运行。如果我启动index.html（我正在使用 HTTP 服务器为根文件夹提供服务），它自然可以解析../dist/TestMain.js，但它会尝试TestWorker.js从./相对于index.html. 我希望它从./相对解决到TestMain.js.

我试过添加output.publicPath = "./"，但这没有帮助。我已经在文档（和worker-loader's 文档）中搜索了类似的选项，但没有发现任何我可以说是相关的（我可能是错的）。

通常，我会全力使用resolve.alias，但输出应该能够放入 HTML 页面可引用的任何文件夹中（主 JS 文件和工作 JS 文件将一起保留在同一个文件夹中）。

我还看到我可以内联工作人员，但我想避免这种情况，因为它会破坏工作人员（可能导致其他类型的引用问题）。

我是否缺少启用相对引用的选项或我错过的解决方法？

这是结构：

这是我的 webpack.config.js：

如果你愿意，我会分享我的其他文件，但如果工作文件与index.html.

我的 Vue 应用程序中有以下服务工作者代码：

main.js

服务工作者.js

当我注释掉'c7d016677eb7e912bc40.worker.js'and'f328c7e2b379df12fa4c.worker.js'时，它工作正常。但是当我取消注释它们时，会发生以下情况：

• 我开始使用开发工具并取消注册任何服务工作者并删除缓存存储中的任何内容，以便我从一个干净的状态开始。
• 我加载localhost:8080。
• 服务人员留在该installing州。
• 在缓存存储中，我看到c7d016677eb7e912bc40.worker.js并f328c7e2b379df12fa4c.worker.js已成功缓存。
• 但是，“已成功缓存所有内容”。没有被记录到控制台。但是“问题缓存：”也没有被记录。

我了解您传递给 event.waitUntil() 的承诺让浏览器知道您的安装何时完成，以及是否成功。很明显，这个承诺存在一些问题。但我不知道问题是什么。它没有击中.then块或.catch块，当我查看开发工具中的缓存存储时，似乎'c7d016677eb7e912bc40.worker.js'并且'f328c7e2b379df12fa4c.worker.js' 正在成功缓存。

编辑：我正在使用worker-loader。我觉得这个问题与工作文件的加载方式有关，但我不明白为什么会有问题，因为当我转到localhost:8080/c7d016677eb7e912bc40.worker.jsor时localhost:8080/f328c7e2b379df12fa4c.worker.js，我会取回 JS 文件。

另外，我确保c7d016677eb7e912bc40.worker.js和中的前缀f328c7e2b379df12fa4c.worker.js是准确的。例如。那是c7d016677eb7e912bc40准确f328c7e2b379df12fa4c的。

更新：

我的目标是使用新的 DefinePlugin.runtimeValue() 功能有条件地将工作人员中的“类型窗口”定义为“未定义”，工作人员外部的“对象”（网络目标）

目前，我不满意的代码是：

我想知道我是否可以通过模块对象检测到worker-loader。

我已经使用 webpack webworker 加载器有一段时间了。我们现在正在迁移到 Angular 7 并开始使用 typescript。

在遵循了许多指南和教程以及这个惊人的问题后： https ://github.com/webpack-contrib/worker-loader/issues/94#issuecomment-336596520

我不断收到错误，并且没有让 worker-loader 使用 typescript。

[at-loader] 中的错误 ....../import/worker/index.ts:4:58 TS2306：文件 '....../import/worker/import.worker.ts' 不是模块.

[at-loader] 中的错误 ......./import/import.component.ts:13:11 TS2304：找不到名称“MyWorkerImport”。

我目前的设置如下：

网络包配置：

tsconfig.json

打字/custom.d.ts

工人/import.worker.ts

工人/index.ts

工人/types.d.ts

导入.component.ts

我不断收到以下消息：

[at-loader] 中的错误 ....../import/worker/index.ts:4:58 TS2306：文件 '....../import/worker/import.worker.ts' 不是模块.

[at-loader] 中的错误 ......./import/import.component.ts:13:11 TS2304：找不到名称“MyWorkerImport”。

如果我将线路更改为

错误变为：

[at-loader] 中的错误 ....../import/worker/index.ts:4:58 TS2307: 找不到模块'worker-loader!./import.worker'。

[at-loader] 中的错误 ....../import/import.component.ts:13:11 TS2304：找不到名称“MyWorkerImport”。

我正在尝试使用 webpack 的 worker 加载器将 web worker 脚本加载到我的 React 应用程序中。但是，我收到一个未找到模块的错误。

./src/index.js 中的错误模块未找到：错误：无法解析“C:\Users\wyrm\Documents\Project\src”中的“./file.worker”

这是我的 src/index.js，它是 webpack 的入口点

我在 Project/public 文件夹中有名为 file.worker.js 的网络工作者脚本

这是我的 webpack 配置文件：

根据 webpack文档，我需要做的就是将以下内容添加到我的配置文件中，我已经完成了：

我进一步指定了此处记录的公共路径：

但即使我已将 publicPath 指定为 Project/public，抛出的错误似乎表明它正在 Project/src 文件夹中查找 web worker 脚本。在我看来，默认情况下 webpack 在 Project/public 文件夹中查找 web worker 脚本，所以正确地为 publicPath 指定 Project/public 应该是多余的？

我还应该提到我正在使用 webpack 开发服务器。是不是我的 webpack 开发服务器缺少某种配置，并且它没有拾取我的 web worker 脚本？

当我似乎正确地遵循了文档时，我真的无法弄清楚为什么我会收到一个未找到模块的错误。

我 在 Rails / Webpacker 设置中使用worker-loader 。worker-loader是在 Webpack 中使用 Web-workers 的一种简单方法。

yarn add worker-loader

根据 Webpacker 说明，我将此加载程序添加到environments.js.

最后，将.worker.js扩展名添加到webpacker.yaml

运行应用程序时，或者直接通过./bin/webpack --progress 我的堆内存耗尽，或者它被卡住并且永远不会完成。

如果我注释掉 中的worker-loader行environments.js，Webpacker 会快速完成而不会出错。

有人遇到类似的事情吗？

我的目标是能够发布一个可以正常导入的 Web Worker NPM 包（import MyPkg from 'my-pkg'），而无需用户使用worker-loader（内联或其他方式）导入它

为此，我尝试使用 Babel 构建脚本以及带有worker-loader.

在以下示例中，有两个项目：Web Worker 包（“Package”），它被npm link编入测试应用程序（“App”）。

包分为两个文件：entry.webpack.js和index.worker.js. 该条目在构建和移动到时/dist被指定为mainpackage.json 中的文件，它目前看起来像这样：

entry.webpack.js

index.worker.js

然后我将 Package 与 Webpack 捆绑在一起：

包.json

webpack.config.js

这会生成两个文件：bundle.js和一个作为哈希的 Web Worker 文件：[hash].worker.js其中包含我们想要评估的代码。不过，它们的关键部分是因为我们使用worker-loader内联导入，所以 webpack 编译的输出看起来像：

最后，应用程序应该能够导入它并像这样使用它：

应用程序.js

但是，如果在应用程序本身中像这样导入工作程序构建，则可以使其工作：

但是，包的要求是：

A）不要求使用包的应用程序必须显式安装worker-loader和 B）不必my-pkg/dist/[hash].worker.js显式引用。

我也尝试[hash].worker.js' as the在 package.json 中指定内置的 main`，但这也不起作用。

编辑1：我忘了提到我所有这些都是基于react-pdf它是如何做到的。如果您查看/src/entry.webpack.js并遵循它在整个软件包中的工作方式，您会发现一些相似之处。

我需要创建一个具有多个工作人员的 CRA(create-react-app) 应用程序。例如（我的工作人员包括导入模块）：

我想如果有人帮助我构建一个具有上述要求的简单创建反应应用程序。

目前我看到：

-- https://webpack.js.org/loaders/worker-loader/

-- https://github.com/GoogleChromeLabs/comlink

-- https://github.com/GoogleChromeLabs/worker-plugin