JS - 创建新工作者导致404

Question

我正在使用Worker API来创建新工作者，它很简单：

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

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

如何使用它来创建我的工作者？

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，这样浏览器就不必从服务器加载任何内容。这是我过去使用的一种方法，并且为工作者编写了一个帮助程序库，使其更易于使用。

希望有所帮助！

Answer 2

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

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

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

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