ここ数年、Webアプリケーション開発ではSPA(シングルページアプリケーション)というキーワードをよく聞くようになり、開発者の方であればReactやAngularJS、Vue.jsなどのSPAに関する開発言語を一度は聞いたことがあるのではないでしょうか。今回取り上げるのは最近トレンドのVue.jsです。

今でこそSPAの開発がもてはやされていますが、MPA(マルチページアプリケーション)での開発も少なくないと思います。また、大規模開発のため機能ごとに画面を分けたいというような希望もあるかもしれません。そんな開発者(私も含む)のためにVue.jsでの開発でwebpackを利用した際のMPA開発環境構築についてご紹介します。少し荒削りな部分もありますがご容赦ください。画面ごとにエントリーポイントが存在するような感じです。

 

1.  インストール
CLIを用いてVue.jsの開発環境を構築します。Vue.jsの開発チームがデフォルトで用意しているwebpackテンプレートを利用します。ターミナルから以下のコマンドを実行してください。vue init時の細かい設定は省略します。

引用元: https://jp.vuejs.org/v2/guide/installation.html

上記の手順によりdevサーバが立ち上がり「https://localhost:8080」のURLから確認できるようになります。

 

2. webpackのコンフィグ変更

webpackテンプレートではhtml-webpack-pluginというプラグインがインストールされます。このプラグインは、webpackで生成されたバンドルファイルに対応したHTMLファイルを生成する役割をもっています。MPAに対応するためにはこのプラグインのコンフィグを変更することになります。

変更対象のコンフィグファイル

  • build/webpack.base.conf.js (ベースコンフィグ)
  • build/webpack.dev.conf.js (開発環境コンフィグ)
  • build/webpack.prod.conf.js (本番環境コンフィグ)
  • config/index.js (ビルド時のコンフィグ)

開発環境コンフィグを覗くと、以下のような記述があります。また、記載しているindex.htmlファイルがプロジェクトの中にも含まれていることが確認できます。これまでwebpackを利用したことがない方はここを発見するのに苦労するのではないかと思います。

next.htmlを新しい画面として作成する場合、変更対象のコンフィグファイルは以下のような記述となります。

「build/webpack.base.conf.js」

 

「build/webpack.dev.conf.js」

※ページ間で差異がなけばtemplateは共通でも問題ないです。

「build/webpack.prod.conf.js」

※chunksは対応するバンドルファイルを指定するためのものです。entryのkey名を指定します。

「config/index.js」

 

3. ソースファイルの作成

こちらでもnext.htmlを作成する前提で進めます。

作成するソースファイル

  • src/next.js (エントリーファイル)
  • next.html (テンプレートファイル)

単純に動作確認をするだけであればmain.js、next.htmlのコピーで問題ありません。

 

4. devサーバを再度立ち上げ

ターミナルで一度devサーバを終了します。終了するには「control」+「c」で終了できます。そして npm run dev を実行しましょう。

そうすると「https://localhost:8080/next.html」でも画面が見れるようになります。next.htmlのtitleタグを変更するとわかりやすいかもしれません。

以上でMPAの開発環境構築は終わりです!お疲れ様でした。
あくまで設定例なのでお好みで設定変更してください。

参考情報
html-webpack-plugin (https://github.com/ampedandwired/html-webpack-plugin)

Follow me!