Webpack 开发服务器使用错误的 MIME 类型提供 wasm

Question

我正在使用 Vue 2（但我认为我的问题不是特定于 Vue 的）。该应用程序使用我使用 npm install [directory_name] 安装的 WebAssembly 库。当我运行 npm run serve 时，它将 .wasm 文件作为 text/html 而不是 application/wasm.

我将此添加到 vue.config.js:

module.exports = {
  // ...
  devServer: {
    mimeTypes: { 'application/wasm': ['wasm'] },
  },
};

但在那种情况下，我明白了：

Error: Attempt to change mapping for "wasm" extension from "application/wasm" to "application/wasm". Pass force=true to allow this, otherwise remove "wasm" from the list of extensions for "application/wasm".

是否有可能 cli-vue-service/webpack-dev-server 已经知道 .wasm 文件，并且我对我们如何使用 npm install 安装库的理解有误？

Answer 1

我在回答我自己的问题。

由于 webpack 的工作方式，让 webpack 加载 .wasm 文件很棘手（假设它是可能的）。我所做的是将 -s "SINGLE_FILE=1" 添加到 emcc 的选项中，这样它就不会生成 .wasm 文件；相反，它将 wasm 嵌入胶水 .js 文件中。

Answer 2

顺便说一句，我是在收到这个错误后才来到这里的：

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

我的 wasm 提取中有一个拼写错误 URL，我正在提取一个不存在的文件，但它给了我这个 mime 类型错误。一旦我修正了拼写错误，一切都正常了。我不必将 mime 类型添加到 webpack 配置中。（自从您在 2 月份发布后，他们可能修复了它。）我正在使用 Vue 开发服务器。

Webpack 开发服务器使用错误的 MIME 类型提供 wasm

Webpack dev server serves wasm with wrong mime type

npm

vue.js

webpack-dev-server

webassembly

npm-install