webpack4→5の時のwasm環境

はじめに

2021/03時点の私的環境構築方法です。
webpack4からの移行の際に困ったので残しておきます。

手順

まずテンプレートをDL

cmd

npm init rust-webpack my-app

次にバージョンアップ＆インストール

cmd

ncu -u
  @wasm-tool/wasm-pack-plugin   ^1.1.0  →   ^1.3.3
  copy-webpack-plugin           ^5.0.3  →   ^8.1.0
  webpack                      ^4.42.0  →  ^5.28.0
  webpack-cli                   ^3.3.3  →   ^4.5.0
  webpack-dev-server            ^3.7.1  →  ^3.11.2
  rimraf                        ^3.0.0  →   ^3.0.2

npm install

cargoは任意で行ってください

cmd

cargo install cargo-update
cargo install-update --all

よし、これで動く...ことはないです。
バージョンの違いで書き方が変わっています。

package.json

- "start": "rimraf dist pkg && webpack-dev-server --open -d",
+ "start": "rimraf dist pkg && webpack serve --open",

webpack.config.js

- new CopyPlugin({
+ new CopyPlugin([
+   patterns: [
      path.resolve(__dirname, "static")
+   ]
- }),
+ ]),

よし、これで動く...ことはないです。
webpack5になって新しくなったものを追加していきます。

webpack.config.js

const webpack = require("webpack")
...
module: {
  rules: [{
    test: /\.wasm$/,
    type: "webassembly/async"
  }]
},
experiments: {
  asyncWebAssembly: true, 
},
...
plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        exprimnet: {
          asyncWebAssembly: true
        }
      }
    }),
...

これらを追加して、npm run startを実行すればHello world!がコンソールに出力されます。

エラー

Rustのコードを書いてて起きたエラー

Uncaught (in promise) TypeError: Cannot read property '__wbindgen_add_to_stack_pointer' of undefined

全然調べても出てこなくて悩んでたのですが、#[wasm_bindgen(start)]の部分丸ごと消してました。
これを読んでるあんたはそんなミスを犯さないようにしてください。

まとめ

webpack5は更新速度が尋常じゃないぐらい早いので、いつこれが使い物にならなくなるかはわかりません。
常に新しい情報を仕入れ続けることを心がけていきたいと思います。