我想使用 Webpack 5 捆绑一个 WebWorker 脚本。给定当前文档的方法是:
const worker = new Worker('./path_to_worker.js', import.meta.url)
但是,我想在我定义它的不同上下文中启动工作者。我想获取工作人员的 url 字符串并实际在其他地方启动它。
const workerUrl = ... get webpack bundled path to worker...
... somewhere else in the code ...
let worker = new Worker(workerUrl)
动态导入可以为 Worker 生成捆绑包,但我无法获取导入脚本的 url,因此我可以在程序执行的稍后时刻将其传递给 worker 构造函数。
我怎么能做到这一点?
回答1
这个可怕的黑客是我目前能想到的最好的方法:
function getWorkerUrl() {
class FakeWorker {
constructor(url: string | URL) {}
}
let oldWorker = self.Worker
// override the default Worker class temporarily to prevent the worker from launching
//@ts-ignore
self.Worker = FakeWorker
// this will generate the worker bundle with a specified name
let worker = new Worker(new URL("./worker.ts" /* webpackChunkName: 'bundle-worker.js' */, import.meta.url))
// determine the path to the bundle
const url = './path_to_js/bundle-worker.js'
// restore the original Worker api
self.Worker = oldWorker
return url
}