webpack で javascript をバンドルする

webpack を使用して、javascript ファイルをバンドル化します。

webpack

webpack は javascript モジュールをまとめ、コンパイルすることができるモジュールバンドラーです。

導入

npm でインストールします。

設定

webpack.config.js を作成してタスクを設定します。

index.js にバンドルするファイルを設定し、watch を有効にして、ファイルに変更があれば自動で更新するように設定します。さらに watch オプションで、変更時に連続で実行されないよう少し間を置いてまとめて更新がかかるようにし、ポーリングも設定しておきます。

a.js b.js c.js をモジュール化して、バンドルします。

mode は production にすると uglify を行います、 development にすることで圧縮する前に状態で出力されます。今回は development にしていますので、devtool でソースマップも出力するようにします。

実行

webpackを実行します。

処理用として設定した test タスクを実行します。

まとめ

今回は、index.js にバンドルするファイルを指定し、watch は webpack.config.js で設定しました。

gulp などのタスクランナーもありますが、webpack のみでバンドル化を行うことで、使用するツールをシンプルにすることができます。機能は webpack ほどありませんが、Parcel などシンプルなモジュールバンドラーもあります。

参考

公式:webpack

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA