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

我遵循了的指南（我使用的是

wasm bindgen=“0.2.72”

）

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

这是指南中提到的

package.json

：

{
“脚本”：{
“构建”：“网页包”，
“服务”：“网页包开发服务器”
},
“依赖性”：{
“@wasm工具/wasm包插件”：“1.0.1”，
“文本编码”：“^0.7.0”，
“html网页包插件”：“^3.2.0”，
“网页包”：“^4.29.4”，
“webpack cli”：“^3.1.1”，
网页包开发服务器“^3.1.0”
}
}

我删除了

文本编码

（因为我不在乎不支持基于非铬的Edge版本），并升级了

@wasm-tool/wasm-pack-plugin

，没有任何问题：

工作

package.json

：

{
“脚本”：{
“构建”：“网页包”，
“服务”：“网页包开发服务器”
},
“依赖性”：{
“@wasm工具/wasm包插件”：“^1.3.3”，
“html网页包插件”：“^3.2.0”，
“网页包”：“^4.29.4”，
“webpack cli”：“^3.1.1”，
网页包开发服务器“^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={
条目：'./index.js'，
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：“index.js”，
},
插件：[
新HtmlWebpackPlugin({
模板：“index.html”
}),
新WasmPackPlugin({
目录：path.resolve（uu dirname，“.”）
})
],
模式：“发展”
};

接下来我做的是升级

html网页包插件

和

webpack

本身

出现错误的版本的

package.json

：

{
“脚本”：{
“构建”：“网页包”，
“服务”：“网页包开发服务器”
},
“依赖性”：{
“@wasm工具/wasm包插件”：“^1.3.3”，
“html网页包插件”：“^5.3.1”，
“网页包”：“^5.27.1”，
“webpack cli”：“^3.1.1”，
网页包开发服务器“^3.1.0”
}
}

因为我将

webpack

升级到版本

5.27.1

，所以我还必须像这样更改

webpack.config.js

：

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

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

const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const WasmPackPlugin=require（@wasm-tool/wasm-pack-plugin”）；
module.exports={
条目：'./index.js'，
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：“index.js”，
},
插件：[
新HtmlWebpackPlugin({
模板：“index.html”
}),
新WasmPackPlugin({
目录：path.resolve（uu dirname，“.”）
})
],
实验：{
asyncWebAssembly:true
},
模式：“发展”
};

现在，当我运行

npm run service

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

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

当我这样做时，我在控制台中不会再出现错误，并且会显示一个显示“Hello，！”（错过“世界”）的警报，所以我认为.wasm应该仍然可以

更新 我能够通过使用以下工具使一切恢复正常：

实验：{
syncWebAssembly:true
},

---

但是，这是不推荐的，因此如果有一种方法仍然使用

asyncWebAssembly

那就太好了，我可以通过以下方式加载我的应用程序使它工作

我的网页包条目配置如下所示：

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

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

引导文件如下所示：

    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中使用任何插件。

有趣的是，我想我以前遇到过这个问题，所以这将是一个很好的机会来找出导致它的原因。问题是，当我对我的Rust代码进行更改时，它不会重新编译我的Rust wasm包。这是我将Webpack与wasm pack插件一起使用的主要原因，因为它提供了实时重新加载功能。@frankenapps我知道这可能并不理想，但如果您使用我的方法，然后安装

cargo watch

并与您的Webpack watch一起运行

cargo watch-I.gitignore-I“pkg/*”-s“wasm pack build”

，然后cargo将调用

wasm pack build

命令更新Web包正在监视和重建的

pkg

目录。我现在接受这一解决方法。希望这能在

wasm包中得到解决
plugin.had在ipport之后添加“console.log（'wasm='+wasm）；”，否则webpack会报告（webassembly）[孤儿]，并且没有加载东西