Question

是否可以使用webpack将wasm导入工人？在我的普通js代码中，我可以像这样导入wasm：

<input type="text" id="game-search">

<div id="game-list">
    <ul>
        <li class="" value="BeamNG.drive" data-series="BeamNG.drive">BeamNG.drive</li>
        <li class="" value="Crash Bandicoot: N. Sane Trilogy" data-series="Crash Bandicoot">Crash Bandicoot: N. Sane Trilogy</li>
        <li class="" value="Grand Theft Auto V (PC)" data-series="Grand Theft Auto">Grand Theft Auto V (PC)</li>
        <li class="" value="Grand Theft Auto V (PS3/PS4)" data-series="Grand Theft Auto">Grand Theft Auto V (PS3/PS4)</li>
        <li class="" value="Grand Theft Auto V (X360/XBO)" data-series="Grand Theft Auto">Grand Theft Auto V (X360/XBO)</li>
        <li class="" value="Project CARS" data-series="Project CARS">Project CARS</li>
        <li class="" value="Project CARS 2" data-series="Project CARS">Project CARS 2</li>
        <li class="" value="Subnautica" data-series="Subnautica">Subnautica</li>
    </ul>
</div>

同一代码在工作程序内部不起作用。它返回以下错误消息：

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

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

Answer 1

基于原始问题和注释，似乎有兴趣解决C / Emscripten和Rust编译的WASM的问题。

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

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

对于Rust，我将提出自己的解决方案，并提供一个github存储库以伴随我的回答，但是在研究过程中，我发现该开发人员已经非常友善地解决了该问题。为我们提供了现成的模板。

谢谢Victor Gavrish！

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 ...

的示例。

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

1 个答案: