このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

どもです。

いやぁ。久々。最近はすっかり積読を消化している日々でございまして。

参考書など書籍を数えるところ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にあげた形となります。

もし困っている人がいましたらー。

追って、書籍の感想など詳細を書いていければと。

ではではぁ。

またまたぁ。