是否可以将 wasm-bindgen 与 webpack 5 一起使用？

我跟着你好世界 https://rustwasm.github.io/docs/wasm-bindgen/examples/hello-world.html Guide for wasm-bindgen https://crates.io/crates/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（因为我不关心不支持非基于 Chromium 的版本Edge）并升级@wasm-tool/wasm-pack-plugin没有问题：

Working package.json:

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

Working 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 and webpack itself.

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

{
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.3.3",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.27.1",
    "webpack-cli": "^3.1.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',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname, ".")
        })
    ],
    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 with webpack ^5.27.1?

我很感谢任何提示。

额外观察

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

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

wasm.greet("World");

当我这样做时，控制台中不再出现错误，并且出现一条显示“Hello, !”的警报。 （缺少“世界”）已显示，所以我认为 .wasm 应该仍然没问题......

Update

我能够通过使用以下方法让一切再次正常工作：

experiments: {
    syncWebAssembly: true
},

然而，这已被弃用，所以如果有一种方法仍然可以使用，那就太好了asyncWebAssembly.

是的，现在官方支持了，因为坚定的 https://github.com/rustwasm/wasm-bindgen/blob/eba691f38ca427c9d440b3d4c44217e58c89c661/examples/hello_world/package.json#L102021年8月10日到总店。请注意，截至 2022 年 12 月，如果您从 wasm-bindgen GitHub 克隆，则需要从 wasm-bindgen 根目录复制示例，查看相关问题 https://github.com/rustwasm/wasm-bindgen/issues/1394。别忘了npm i在继续之前npm run serve