javascript - 为什么在将 Wasm 捆绑在一起后出现错误 "Response has unsupported MIME type"，但在使用 webpack 开发服务器服务时却没有？

Question

我正在尝试创建一个 Rust WebAssembly 项目并修改了 rust-webpack-template作为我的出发点。该模板是一个带有调用单个 Wasm 函数的 JavaScript 文件的 webpack 项目，Rust Wasm 从那里接管。

我修改了模板，因为我想在 JavaScript 中使用我的主要逻辑并通过 API 调用 Rust Wasm。

我已将 webpack 条目更改为如下所示的 bootstrap.js。

// bootstrap.js
import("./index.js").catch(e => 
    console.error("Error importing 'index.js':", e)
);

我添加了文件 index.js 并调用了 Rust Wasm 函数

// index.js
import * as wasm from "../crate/pkg/rust_webpack";

const title = document.getElementById("msg");

title.innerText = wasm.get_msg();

Rust 中的 get_msg 函数如下所示:

#[wasm_bindgen]
pub fn get_msg() -> String {
    "Hello from Rust WebAssembly!".to_owned()
}

当我使用 webpack-dev-server -d 运行项目时，一切正常。

但是，当我使用 webpack 构建项目并尝试直接托管生成的文件时，没有任何显示并且浏览器控制台显示错误:

Error importing 'index.js': TypeError: "Response has unsupported MIME type"

此错误来自 bootstrap.js 中的代码，但我不完全确定它的含义或如何修复此错误。

为什么在使用 webpack 开发服务器服务时一切正常，但在将所有内容捆绑在一起后却不行？

Answer 1

作为Shepmaster帮助我在评论中弄清楚，当浏览器期望它是 application/wasm 时，.wasm 文件的 MIME 类型被设置为 application/octet-stream .

我正在使用一个简单的 express服务器来托管我的文件。可以将 Express 配置为在一行中使用正确的 MIME 类型。

var express = require('express');
var app = express();

// Set the MIME type explicitly
express.static.mime.define({'application/wasm': ['wasm']});

app.use(express.static('./dist'));

app.listen(3000);

根据 this issue , express 将在 4.17 版本后正确处理 .wasm 文件。它在 webpack 开发服务器中正常工作，因为他们实现了自己的 workaround当他们等待 express 修复时。