如何使用 webpack 在 Web Workers 中导入 wasm？

Question

webpack可以在worker中导入wasm吗？在我的普通 js 代码中，我可以像这样导入 wasm：

import('../wasm/hello_world.wasm').then(module => {
    console.log(module.add_one(9))
})

相同的代码在工作人员内部不起作用。它返回以下错误消息：

Uncaught TypeError: Cannot read property './src/wasm/hello_world.wasm' of undefined

我的 webpack 配置是 webpack worker 和 wasm 示例的组合。

• https://github.com/webpack/webpack/tree/master/examples/web-worker
• https://github.com/webpack/webpack/tree/master/examples/wasm-simple

Answer 1

根据最初的问题和评论，看起来有兴趣为 C/Emscripten 和 Rust 编译的 WASM 解决这个问题。

我发现下面的文章很好地解释了如何实现 Emscripten 生成的 wasm 的结果：

https://medium.com/@c.gerard.gallant/web assembly-web-workers-f2ba637c3e4a

至于 Rust，我本来打算对此提出自己的解决方案，并提供一个 github 存储库来配合我的答案，但在我的研究过程中，我发现该开发人员已经很好地解决了该问题，并善意地为我们提供了一个随时可用的模板。

谢谢维克多·加夫里什！

https://github.com/VictorGavrish/rust-wasm-worker-template

README.md 中的步骤有点过时了。我能够通过执行以下操作来构建和运行该项目：

将存储库克隆到本地并执行：

cd rust-wasm-worker-template/www
npm install
npm run build
npm run start

一旦 webpack 完成所有内容的捆绑，就可以通过控制台上提供的 URL 访问开发站点。

一般来说，需要记住的重要事情是网络工作者的局限性。无法直接访问 dom 或控制台，您必须处理从工作线程到主线程的消息传递，然后输出到控制台。我特别提到这一点是因为OP使用了一个名为console.log的示例...