是否可以在 webpack 5 中使用 wasm-bindgen？

如何解决是否可以在 webpack 5 中使用 wasm-bindgen？

我遵循了 Hello World 指南 wasm-bindgen（我使用的是 wasm-bindgen = "0.2.72"）。

不幸的是，指南中提到的 npm 包并不是最新的。因为我想有一个干净的起点，所以我尝试升级它们。

这是指南中提到的package.json：

{
  "scripts": {
    "build": "webpack","serve": "webpack-dev-server"
  },"devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "1.0.1","text-encoding": "^0.7.0","html-webpack-plugin": "^3.2.0","webpack": "^4.29.4","webpack-cli": "^3.1.1","webpack-dev-server": "^3.1.0"
  }
}

我删除了 text-encoding（因为我不在乎不支持 Edge 的非基于 Chromium 的版本）并升级了 @wasm-tool/wasm-pack-plugin 没有问题：

工作package.json：

{
  "scripts": {
    "build": "webpack","devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.3.3","webpack-dev-server": "^3.1.0"
  }
}

工作webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    entry: './index.js',output: {
        path: path.resolve(__dirname,'dist'),filename: 'index.js',},plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname,".")
        })
    ],mode: 'development'
};

我接下来要做的是升级 html-webpack-plugin 和 webpack 本身。

出现错误的版本的package.json：

{
  "scripts": {
    "build": "webpack","html-webpack-plugin": "^5.3.1","webpack": "^5.27.1","webpack-dev-server": "^3.1.0"
  }
}

因为我将 webpack 升级到版本 5.27.1，所以我也不得不像这样更改 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    entry: './index.js',experiments: {
        asyncWebAssembly: true
    },mode: 'development'
};

现在，当我运行 npm run serve 时，构建完成且没有错误，但是当我打开网页时不再显示警报。在浏览器控制台中，现在记录以下错误：

TypeError: _index_bg_wasm__WEBPACK_IMPORTED_MODULE_0__ is undefined
    greet webpack:///./pkg/index_bg.js?:113
    <anonymous> webpack:///./index.js?:4
    promise callback* webpack:///./index.js?:4
    js http://localhost:8080/index.js:18
    __webpack_require__ http://localhost:8080/index.js:366
    <anonymous> http://localhost:8080/index.js:709
    <anonymous> http://localhost:8080/index.js:712

我该怎么做才能摆脱这个问题，以便我可以将 wasm-bindgen 与 webpack ^5.27.1 一起使用？

我很感激任何提示。

额外的观察

有趣的是，我发现，即使使用不工作的版本，也可以从 m => m.greet('World!') 中删除 index.js，而是像这样从 pkg/index.js 调用 wasm 函数

import * as wasm from "./index_bg.wasm";
export * from "./index_bg.js";

wasm.greet("World");

执行此操作后，控制台中不再出现错误并显示“您好，！”的警报。 （缺少“世界”）显示，所以我认为 .wasm 应该仍然没问题......

更新

我能够通过使用：

experiments: {
    syncWebAssembly: true
},

然而，这已被弃用，所以如果有办法仍然使用 asyncWebAssembly，那就太好了。

解决方法

我能够通过以下方式加载我的应用程序来使其工作。

我的 webpack 入口配置如下：

    entry: {
      wasm: ['./src/bootstrap.js'],vendor: ['react','react-dom'],},

引导文件如下所示：

import('./index.tsx').catch(e =>
  console.error('Error importing `index.getStringX`:',e),);

在我的 React 应用程序中，我加载了使用 npm 安装的 wasm 包，如下所示：

import * as wasm from 'myRustWebAssemblyPackedPackage';

这就是我所做的。我不使用 Webpack 中的任何插件。