将一个含有 wasm 的模块引入并编译到 webpack 中

Question

我正在尝试导入一个模块，以便在通过webpack编译的库中使用。尽管已经加载了该模块的javascript API，但是随附的.wasm文件并没有加载。这会导致任何涉及wasm模块的函数抛出未定义错误。同时也有可能是webpack干扰了.wasm文件，但我不确定。以下是报错信息。

Uncaught (in promise) TypeError: _index_bg_wasm__WEBPACK_IMPORTED_MODULE_0__.open_image is not a function
    at Module.open_image (index_bg.js?0d72:1468)

以及相关的函数调用

import('@silvia-odwyer/photon').then(photon => {
  console.log(photon.open_image) // <-- correctly prints function
  let ctx = canvas.getContext('2d');
  let photonImg = photon.open_image(canvas, ctx); // <-- error
  photon.grayscale(photonImg);
  photon.putImageData(canvas, ctx, photonImg);
});

我已经尝试使用wasm-loader，根据这个的建议，编辑了我的tsconfig以使用esnext，改用JavaScript而不是TypeScript编写，将Webpack块数限制为1，并尝试从文档和在线资源中使用不同的导入和编译wasm的方式。

- Vinh

Answer 1

我遇到了完全相同的错误，实际上是因为我重复加载了WASM文件。在我的webpack配置中，我有我的wasm-pack配置：

config.plugin('wasm-pack')
    .use(WasmPackPlugin)
    .init(
      (Plugin) =>
        new Plugin({
          crateDirectory: path.resolve(__dirname, './rust_wasm_code'),
          forceMode: 'release'
        })
    )
    .end()

以及用于加载WASM文件的文件加载代码：

config.module
    .rule('wasm')
    .test(/.wasm$/)
    .use('wasm-loader')
    .loader('wasm-loader')

我通过删除第二段代码（并依赖于 WASM-pack 进行编译和加载）来修复了错误。

- jxmorris12