ブロックチェーンエンジニアの備忘録

まずwebpackとは

webpackはjs、css、imageを一つのファイルにまとめることで、これらを取得するための通信回数を減らすことが目的のツールです。webpackを使うことでフロントエンドでの描画スピードを高速にすることができます。

よくある問題点

webpackビルドして一つにまとめたファイルはブラウザやサーバーで実行されます。

ブラウザで実行する場合、ブラウザによって使える機能が異なります。サーバーで実行する場合はNode.jsとして実行するため、Node.jsのバージョンに注意する必要があります。

このようにビルドしたファイルの実行環境に対応したビルド方法が重要になります。

今回の問題点

Module not found: Error: Can't resolve 'fs'

このエラーはブラウザ環境向けにwebpackでビルドするファイルにNode.js固有の機能であるfsモジュールを使っているのが原因でした。

自分の実装した処理でfsを使っている場合はfsの処理を別の実装に変更するか消すかしかありません。

公式でもfsの変わりは今のところ準備されていません。もしfsを使っているライブラリを使っているのであれば使っていない別のものを使用するように変更しなければいけません。

よくある間違った回答

ネットでよくある間違った回答をあげます。

fs: ‘empty’やtarget: ‘node’を設定する。emptyを設定するとビルド後のファイルでfsは空になってしまいます。これはビルドは成功しても実際に使用した時にエラーになることが多いです。

target: ‘node’でうまくいっているのは実行環境がNode.jsだからですね。

GitHubのissueでもよく見かけます。ビルド後のファイルが実行環境に依存していることを分かっていない人がたまたまうまくいっているだけです。

ちなみにwebpackはデフォルトでブラウザ向けにビルドします。