webpack 入門複数ファイルをバンドルしてみよう

2020年10月25日

前回に引き続き webpack の入門です。

今回は、複数ファイルを一つにバンドルする方法をみていきます。

二つの javascript ファイルを一つに束ねる

フロントエンドの開発において、javascript のコードをひとつだけのファイルに書いていくことはほとんどありません。

プロジェクトが大きくなるほど記述量が増えるので、一つのファイルだと可読性やメンテナンス性が落ちます。

例えば、ファイルの行数が1000行だとどこに何が記述されているのかを見つけるのが大変ですし、複数人で開発するときは競合が起きやすくなります。

そのため、通常はファイルを分割してあるファイルからあるファイルの関数などを読み込む、ということをします。

ここで、ファイル間の依存関係が生まれてくるので、それに注意する必要があります。

webpack ではこの依存関係も自動で判断してくれます。

例えば、index.js がメインのファイルで、そのファイルから helper.js の hoge という関数を読み込んでいるとします。

const hoge = require('./helper');

console.log(hoge());

function hoge(){
  return 'hoge';
}

module.exports = {
  hoge
};

index.js と helper.js は、同じ src ディレクトリ内に配置します。

この状態で webpack を実行してみます。

$ npx webpack --mode=development

dist/main.js を改めてみてみると、前回より記述量が増えていると思います。

ファイルの中を良くみると、index.js のセクションと、helper.js のセクションがあることが分かります。

無事に二つのファイルが main.js としてひとつに束ねられたことが分かります。

ここで、「何も指定していないのに、なぜ index.js が開始点だと分かったのか」と疑問に思うかもしれません。

実は webpack では、デフォルトの起点(以下 entry)は index.js というファイルになっています。

試しに、index.js の名前を index2.js などに変更すると、webpack の実行が失敗します。

では、index.js 以外のファイルを entry にすることが可能かというと、可能です。

$ npx webpack --entry=./src/helper.js --mode=development

–entry オプションを使うことで、entry ポイントを指定できます。

上記のコマンドで出力された dist/main.js をみてみると、index.js の記述がなくなっていると思います。

これは、helper.js がentry ポイントとなったので、index.js が含まれなくなったためです。

このように、webpack には細かい動作を指定するためのたくさんのオプションが存在します。

（このオプションの多さが webpack をとっつきにくくする原因でもあるのですが）

ちなみに、–entry についてはこちらの公式に説明があります。

次回はこれらのオプションを設定ファイルに記述する方法をみていきます。