JS - 创建新工人导致 404

Question

我正在使用 Worker API 创建新的 worker，非常简单：

var myWorker = new Worker('src/worker.js');

不幸的是，我正在使用 webpack 构建我的项目并链接到 src/worker.js returns 404.

如何使用它来创建我的 Worker？

import hardWorker from './src/hardWorker.js';
var myWorker = new Worker(HOW TO PUT HARDWORKER HERE?);

Answer 1

问题是工作人员 API 期望 URL 从中加载工作脚本，而 webpack 试图将所有内容捆绑到一个文件中，这意味着 src/worker.js 文件不是'当浏览器尝试加载它时它需要位于的位置。

有几个选项。

您可以手动将 worker.js 文件复制到构建尝试从中加载文件的任何位置。
您可以设置 webpack 使用 CopyWebpackPlugin.
根据您的工作人员的复杂程度，您可以将代码放在一个字符串中并创建一个 object URL，这样浏览器就根本不必从服务器加载任何内容。这是我过去使用过的一种方法，并为 Workers 编写了一个更易于使用的帮助程序库。

希望对您有所帮助！

Answer 2

尝试使用 Webpack 的 worker-loader 插件，可在此处找到：https://github.com/webpack-contrib/worker-loader

这会将通过它加载的脚本注册为 Web worker，并将所有 worker 捆绑到 webpack 创建的主包中。在您的应用中使用它就像这样简单：

import MyWorker from 'worker-loader!./Worker.js';
const worker = new MyWorker();

或者您可以将加载程序配置参数添加到您的 webpack.config，以便加载与特定模式匹配的所有文件并注册为工作程序。 worker-loader 有一个这样的例子。

JS - creating new worker causes 404