Webpack 开发服务器为 wasm 提供错误的 mime 类型答案

【问题标题】：Webpack dev server serves wasm with wrong mime typeWebpack 开发服务器为 wasm 提供错误的 mime 类型
【发布时间】：2021-05-08 23:48:04
【问题描述】：

我正在使用 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'] },
  },
};

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

错误：尝试将“wasm”扩展名的映射从“application/wasm”更改为“application/wasm”。传递force=true 以允许这样做，否则从“application/wasm”的扩展列表中删除“wasm”。

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

【问题讨论】：

标签： vue.js npm npm-install webpack-dev-server webassembly

【解决方案1】：

我正在回答我自己的问题。

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

【讨论】：

【解决方案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 开发服务器。

【讨论】：