为什么我在将 Wasm 捆绑在一起后收到错误“响应具有不受支持的 MIME 类型”，但在使用 webpack 开发服务器时却没有？

Question

我正在尝试制作一个 Rust WebAssembly 项目并修改了rust-webpack-template作为我的起点。该模板是一个带有 JavaScript 文件的 webpack 项目，该文件调用单个 Wasm 函数，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();

get_msgRust的函数如下所示：

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

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

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

导入“index.js”时出错：TypeError：“响应具有不受支持的 MIME 类型”

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

为什么在使用 webpack 开发服务器时可以工作，但在将所有内容捆绑在一起后却不能工作？

Answer 1

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

我正在使用一个简单的快速服务器来托管我的文件。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);

根据这个问题，express 将在 4.17 版本之后正确处理 .wasm 文件。它在 webpack 开发服务器中正常工作，因为他们在等待 express 修复时实现了自己的解决方法。