RustとWebAssemblyによるゲーム開発 Webpack5対応
2025.03.27
どもです。
いやぁ。久々。最近はすっかり積読を消化している日々でございまして。
参考書など書籍を数えるところ500冊くらい所持していまして w（面白そうな書籍はついつい購入しちゃいますよね。。）
まだ、200冊くらいしか読んでいないのでバタバタ消化している日々ですよ。
会社の方におすすめ書籍を紹介したりしているのですが、最近ヒットが薄いなぁと思っていたところ、発売日くらいに購入していて積読していた「RustとWebAssemblyによるゲーム開発」を、やっと消化していている日々なのですが、いやぁ、久々に面白い。スキルセットや攻めるところが、自分にピッタリのところもあるのですが、非常に楽しく過ごさせていただいております。
もう最後のほうなので、詳細に関しては後日まとめようかと。
で、困ったことにある日を境にビルドが全く通らなくなり、立ち上げられなくなりました。
そのある日なのですが、約5年使用してきたM1 MacMiniから Mac Mini M4 Proに乗り換えを行った日からです。（Mac Mini M4 Pro最高）
以下のようなエラーですね。
Version: webpack 4.47.0
Time: 14ms
Built at: 2025/03/26 8:14:29
2 assets
Entrypoint index = index.js
[./pkg/index.js] 167 bytes {0} [built]
[./pkg/index_bg.js] 4.87 KiB {0} [built]
[./pkg/index_bg.wasm] 2.38 KiB {0} [built] [failed] [1 error]
+ 77 hidden modules
ERROR in ./pkg/index_bg.wasm
Module parse failed: Internal failure: parseVec could not cast the value
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
いやー困った。書籍内では以下のコマンドを実行し
$ npm init rust-webpack
こちらのテンプレートを生成し利用しているのですが、
https://github.com/rustwasm/rust-webpack-template
こちらの更新が5年前くらいから止まっている状態。
Webpackのバージョンも4のままで、依存しているパッケージも古くなっている。
M1Mac miniでは問題なかったが、M4 Proに移行したらまっさらな状態で npm start してもエラー吐きまくって、同じくコンパイルが通らず起動できない。
色々検討した結果（そんなには時間はかけて考えてはいないのですが）
まぁ。「Webpackのバージョン上げたほうが良さそう」に落ち着きましたと。
GitHubにもあげました。
https://github.com/webcyou-org/rust-webpack-template
主な修正点
webpack.config.js
以前の
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
const dist = path.resolve(__dirname, "dist");
module.exports = {
mode: "production",
entry: {
index: "./js/index.js"
},
output: {
path: dist,
filename: "[name].js"
},
devServer: {
contentBase: dist,
},
plugins: [
new CopyPlugin([
path.resolve(__dirname, "static")
]),
new WasmPackPlugin({
crateDirectory: __dirname,
}),
]
};
今回の
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
mode: "development",
entry: "./js/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
experiments: {
asyncWebAssembly: true,
},
module: {
rules: [
{
test: /\.wasm$/,
type: "webassembly/async",
},
],
},
plugins: [
new CopyPlugin({
patterns: [
{ from: path.resolve(__dirname, "static"), to: "" },
],
}),
new WasmPackPlugin({
crateDirectory: __dirname,
}),
],
devServer: {
static: path.resolve(__dirname, "dist"),
port: 8080,
},
resolve: {
extensions: [".js", ".wasm"],
},
};
js/index.js
前回の
import("../pkg/index.js").catch(console.error);
今回の
import * as wasm from "../pkg/index.js";
package.json
"start": "rimraf dist pkg && webpack serve --open --mode development",
"devDependencies": {
"@wasm-tool/wasm-pack-plugin": "^1.1.0",
"copy-webpack-plugin": "^11.0.0",
"rimraf": "^5.0.1",
"webpack": "^5.90.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
npm initでインストールできるようにしてもよいかと思いますが、そもそもWebpackではなく、Viteなど別の選択肢もありまたそれも形骸化しかねないのもあり、（まぁそこまでするのも面倒というのも）とりあえずGitHubにあげた形となります。
もし困っている人がいましたらー。
追って、書籍の感想など詳細を書いていければと。
ではではぁ。
またまたぁ。
