问题标签 [worker-loader]

我正在编写一个 JavaScript 库，并且正在使用一个网络工作者。我正在使用 webpack（带有 worker-loader）来创建我的构建。图书馆一切正常。

webpack.config.js

生成：

当我尝试在反应应用程序上导入我的库时，我的库尝试像这样加载工作人员： http://localhost:3000/dist/app.worker.js. 这显然失败了，因为它位于node_modules/.../dist/app.worker.js.

我可能没有正确使用 worker-loader。

谢谢你的帮助

我有一个未弹出的 create-react-app (react-scripts v3.4.3) 和 Typescript 应用程序，我正在尝试在其中使用 Web Worker。我能够使用以下 import 语句将 worker 与workerize-loader捆绑在一起：

问题是我需要更改加载程序的 publicPath 属性而不从 create-react-app 弹出，所以我尝试添加查询参数，如内联加载程序的 webpack 文档中提到的：

选项可以通过查询参数传递，例如 ?key=value&foo=bar，或 JSON 对象，例如 ?{"key":"value","foo":"bar"}

我已经尝试了两种方法，但都返回相同的 Typescript 编译器错误“找不到模块...”

webpack 文档中提到的查询参数是否仅用于 中的module.rules属性webpack.config.js？

我正在编写一个 npm 包，它是流行库leafletjs 的插件。我正在使用 webpack 来捆绑包。我希望这个包能够根据命令生成和销毁一些网络工作者。网络工作者代码是我的源文件的一部分。但我希望能够将我的包作为 npm 模块或通过 cdn 分发，这意味着它必须被编译为可以通过 HTML 标头包含的单个文件。我正在使用 webpack 来做到这一点。所以可以说我有一个工作文件：

相当简单，但重要的一点是，我的工作人员实际上是从算法文件中导入一些代码，而这又是在导入一些节点模块。我的工人在某处的主模块中使用，如下所示：

我的 webpack 配置如下所示：

这不能按原样工作 - webpack 尝试将主包和每个工作脚本文件捆绑在同一名称下。更改为filename: '[name].js'underoutput解决了这个问题，但给了我很多文件 - 一个用于主包，另一个文件用于我的源代码中的每个工作文件。

阅读 webpack 选项，我认为使用该inline: 'fallback'选项实际上会为每个工作人员创建一个 Blob 并将其捆绑到主输出文件中。那没有发生。

到目前为止，我的解决方案是将我的工人写成 blob，如下所示：

这确实有效 - webpack 现在输出 1 个包含工作代码的单个文件。使用这个答案的修改版本，我至少可以将我的代码放在一个function( ...code... ){}.toString()格式中，所以我至少可以获得智能感知、语法突出显示等。但我不能使用导入。

我如何使用 webpack 捆绑我的工作人员，以便整个捆绑包最终包含在 1 个文件、工作人员代码和所有内容中？

尝试使用worker-loader创建 SharedWorker 它没有创建它，只是创建了 Worker。似乎它忽略了选项。

父代码中的用法

工人代码

webpack 规则

但在控制台中，它显示为 Worker 类。它有什么问题？

依赖关系

这件事要求我添加更多细节：“看起来你的帖子主要是代码；请添加更多细节。” 这只是一个存根文本。对不起。

我尝试使用网络工作者创建打字稿库。当我使用 webpack-dev-server 测试我的代码时，一切看起来都很好，找到了所有文件，但是当我让 npm run build 并尝试在另一个本地项目（npm install /local/path）中使用 lib 时，我GET http://localhost:8080/X.worker.js 在浏览器控制台中看到.

webpack.config.js：

tsconfig.json

包.json

我如何导入工人的示例：

我的理解是以下 Webpack worker-loader 配置：

会将工作文件（在本例中名为 worker.js）与其他 JS 文件捆绑到输出文件中，从而产生单文件输出。然后使用在应用程序中加载文件

将成功加载 Worker。经过测试，似乎我理解错了。inline不会将 worker 打包到单个文件中；它在输出目录中创建一个单独的文件。

那么，究竟在inline做什么呢？

嗨，我正在尝试在 React 中使用 mapbox-gl 和本教程。我收到了这个错误： 意外的'！' 在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker' 中同时导入 "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"

这是我的重要代码：

地图.js

index.js

索引.html

包.json

谁能帮我解决这个问题？

我想在“Antd Pro”项目中使用网络工作者。我尝试了在网上找到的不同方法，但没有一个有效。

“Antd Pro”由内部使用 Webpack 的 Umijs 框架驱动。为此，我发现的唯一方法是使用 Chain Webpack。

顺便说一句，我在这个项目中使用了 Typescript。

这是配置：

我得到了这个错误：

我正在开发我的 vue 应用程序，我正在尝试添加 worker-loader。这些是我跟随的站点。我使用纱线添加了工人装载机。

main.js

环境.js

我得到的错误是

请让我找出哪里出错并帮助我设置 worker-loader。

我使用Vue 2和Common.js来生成 AMD Bundle。我需要能够在运行时自动注册我的服务工作者。有效的东西：

https://www.npmjs.com/package/worker-plugin

https://www.npmjs.com/package/worker-loader

我需要服务人员的原因是发送通知。但是，我遇到了麻烦，因为似乎唯一支持的工作人员在 DedicatedWorkerGlobalScope 或 SharedWorkers 中。然而，为了调度“showNotification”，我需要Service Worker 类型。

所以基本上我做什么：

像魅力一样工作，就像这个（工人插件）一样：

但是，始终是普通工人。那些不是服务人员和我从几个小时以来一直试图解决这个问题。是否缺少配置来更改类型？一些见解会很棒。

为了说明我试图实现的目标：

Service Worker 的注册需要在运行时自动进行，我无需引用绝对或相对 url。

关于我如何实现我想要实现的目标的任何见解？