使用 wasm 将模块导入并编译到 webpack 中
Posted
技术标签:
【中文标题】使用 wasm 将模块导入并编译到 webpack 中【英文标题】:Importing and compiling a module with wasm into webpack 【发布时间】:2020-10-26 14:37:07 【问题描述】:我正在尝试导入 module 以在通过 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
,根据this编辑我的tsconfig
以使用esnext
,用javascript而不是typescript编写,将webpack块数限制为1,以及导入和编译wasm的不同方式来自documentation 和online
【问题讨论】:
【参考方案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 编译和加载)修复了错误。
【讨论】:
以上是关于使用 wasm 将模块导入并编译到 webpack 中的主要内容,如果未能解决你的问题,请参考以下文章
如何使用webpack在web worker中导入wasm?