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

【问题标题】：How to import wasm in web workers with webpack?如何使用 webpack 在 web worker 中导入 wasm？
【发布时间】：2018-07-02 06:00:44
【问题描述】：

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 示例的组合。

【问题讨论】：

【解决方案1】：

根据原始问题和评论，似乎有兴趣为 C / Emscripten 和 Rust 编译的 WASM 解决这个问题。

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

至于 Rust，我打算提出自己的解决方案，并提供一个 github 存储库来配合我的回答，但在我的研究过程中，我发现这个开发人员已经很好地解决了这个问题，而且很友善为我们提供了一个现成的模板。

谢谢维克多·加夫里什！

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

在本地克隆 repo 并执行：

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

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

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

【讨论】：