MPA(マルチページアプリ)でwebpackを使う

2019.03.15.金
JavaScript技術



こんにちは。
現在のWebアプリ開発は、エントリポイントが1つだけのSPA(シングルページアプリ)が主流で、webpackに関する情報もSPA向けが圧倒的に多いです。

通常、MPA(マルチページアプリ環境下でそのままwebpackを使おうとすると、ページを追加するたびにwebpack.config.jsをいじる必要があり面倒です。

今回は、そんなMPA環境下で、なるべく楽をできるようなwebpackの設定ポイントを書きます。

実現したいこと

新しいページ追加しても基本的にwebpack.config.jsをいじらなくて済むようにしたい。

今回は2つのページ(index.html, support.html)が存在するWebアプリ上のアセットを、webpackを使いHTMLにバンドルして出力します。
各ページは固有のJavaScriptファイルを読み込むものとし、ファイル内でESモジュールのVue.jsをつかいます。

ディレクトリ構成

ビルド後は、distディレクトリ下にHTMLとJavaScriptを出力します。


ソースコード

最低限しか載せていません。
webpack.config.js


ポイント

1. 外部モジュールの読み込み

各ページのJavaScriptファイル内で、毎回Vue.jsのような外部モジュールを読み込ませるのは手間ですのでProvidePluginを使います。
webpack.config.js(抜粋)

src/index.js

2. 外部モジュールのバンドル

そのままだと index.js と support.js の、それぞれにVue.jsがバンドルされてしまうので、SplitChunksPluginを使い外部共通モジュールはvendor.jsとして、わけて出力します。
モジュールの使用状況にあわせて適切な内容で出力してくれるみたいです。
webpack.config.js(抜粋)

3. エントリの自動追加

通常、新しいページを追加した場合にwebpack.config.jsのentryオプションへ、バンドルしたいJavaScriptファイルを列挙しますが、数が多い場合や後から増えることを考慮しGlobで自動化します。

4. アセットをバンドルしたHTMLを出力

HtmlWebpackPluginを使うと、各ページ毎にvendor.js と ページ固有のJavaSciptファイルのscriptタグを付加したHTMLファイルを出力できます。
webpack.config.js(抜粋)

【出力前】src/index.html

【出力後】dist/index.html


以上です。

細かい説明は省きましたが、MPAでwebpackを利用する際のおおまかなポイント紹介でした。
webpackについては、まだまだ自分もわからないことだらけで悪戦苦闘しております。

フロントエンド開発に詳しい方、キー・ポイントでは大募集中です。お待ちしております。