Webpack: asyncWebAssembly+importAwait
4205 ワード
wasmのダイナミックimportsとモジュール解決してくれる内部プラグインがWebpack v5.0から入っていた。
webpack.config.js
module.exports = {
entry: "./example.js",
output: {
webassemblyModuleFilename: "[hash].wasm",
publicPath: "dist/",
filename: "output.js"
},
module: {
rules: [
{
test: /\.wasm$/,
type: "webassembly/async"
}
]
},
experiments: {
asyncWebAssembly: true,
importAwait: true
}
};
example.js
import await { add } from "./add.wasm";
console.log(add(22, 2200));
index.html
<html>
<body>
<script src="dist/output.js"></script>
</body>
</html>
内部的にはfetchして WebAssembly.instantiateStreaming() に食わせてexportsを Object.assing() してモジュールを解決してくれるっぽい。
npx http-server ではwasmファイルのcontent-type指定がGoogle Chromeで動作しなく、かわりに ecstatic を使った。
$ webpack -v
5.0.0-beta.23
$ webpack && ecstatic
$ open http://127.0.0.1:8000/
ソースコードは examples/wasm-simple によるもの
Author And Source
この問題について(Webpack: asyncWebAssembly+importAwait), 我々は、より多くの情報をここで見つけました https://qiita.com/laiso/items/a5f7362c4a9163a878e5著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .