该模块似乎是一个 WebAssembly 模块，但模块没有被标记为 webpack 的 WebAssembly 模块答案

【问题标题】：The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack该模块似乎是一个 WebAssembly 模块，但模块没有被标记为 webpack 的 WebAssembly 模块
【发布时间】：2022-12-16 09:53:44
【问题描述】：

我正在尝试在我的 Vue 项目中导入一个 webassembly 模块（用Rust 编写并用wasm-pack 编译）。我所做的是创建了一个项目：

vue-cli create my-vue-webasm-proj

我选择了 Vue 2。然后我像这样修改了我的main.js（添加了async beforeCreate()）：

/* main.js */

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  async beforeCreate() {
    const wlib= await import('my-webasm-lib')
    console.log(wlib)
  },
}).$mount('#app')

在npm run serve 之后我得到这个错误：

Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

我如何解决它？

我试图将此配置添加到 webpack.config.js 中，但没有成功：

module.exports = {
  experiments: {
    asyncWebAssembly: true,
    importAsync: true
  }
}

我的package.json如果以下：

...
"dependencies": {
  "core-js": "^3.8.3",
  "my-webasm-lib": "file:../my-webasm-lib/my-webasm-lib-pkg",
  "vue": "^2.6.14"
},
"devDependencies": {
  "@babel/core": "^7.12.16",
  "@babel/eslint-parser": "^7.12.16",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "eslint": "^7.32.0",
  "eslint-plugin-vue": "^8.0.3",
  "vue-template-compiler": "^2.6.14"
},
...

【问题讨论】：

标签： vue.js webpack webassembly wasm-pack

【解决方案1】：

这是一个有点晚的答案，但也许对某人有帮助。

module.exports = {
  runtimeCompiler: true,
  configureWebpack: {
    externals: {
      experiments: {
        asyncWebAssembly: true,
      },
    },
  },
};

【讨论】：