如何使用webpack在web worker中导入wasm？

Posted 2021-04-04

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

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

相同的代码在worker中不起作用。它返回以下错误消息：

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

答案

基于原始问题和评论，看起来有兴趣为C / Emscripten和Rust编译的WASM解决这个问题。

我发现以下文章很好地解释了如何在这里实现Emscripten生成的结果：

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

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

谢谢Victor Gavrish！

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

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

在本地克隆repo并执行：

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

一旦webpack完成捆绑所有内容，dev站点将从控制台上提供的URL中获得。

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