试图了解如何通过 webpack 导入 web-assembly 包

Question

我正在 webpack@4.43.0 并正在尝试使用这个 Web 程序集库 https://github.com/vislyhq/stretch 根据文档，我正在从中导入一些 classes，即

import { Allocator, Node } from 'stretch-layout';

class Base {
  public layoutNode;

  public constructor() {
    this.layoutNode = new Node(allocator, {});
  }
}

然而，当我尝试使用 webpack 构建它时（不使用任何加载程序并且我的 resolve.extensions webpack 配置中有 .wasm）我收到以下错误

WebAssembly module is included in initial chunk. This is not allowed, because WebAssembly download and compilation must happen asynchronous. Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:

据我所知，我需要为该模块使用 import()，但如何使这些导入对我的 class 可用？应用程序将失败，因为我们需要等待导入？如果我这样做，我会收到一条错误消息，指出 Allocator 和 Node 不是构造函数。

let Allocator: any = null;
let Node: any = null;

import('stretch-layout').then(module => {
  Allocator = module.Allocator;
  Node = module.Node;
});

Answer 1

我能够使用 webpack 5 的最新测试版解决这个问题，方法是在配置中添加以下实验性标志

  experiments: {
    asyncWebAssembly: true,
    importAsync: true
  }

这样你就不必担心任何异步 import() 语句

试图了解如何通过 webpack 导入 web-assembly 包

Trying to understand how to import web-assembly package via webpack

javascript

webpack

webassembly