ScriptwebpackVue.js+webpackでMPAの開発環境構築ここ数年、Webアプリケーション開発ではSPA(シングルページアプリケーション)というキーワードをよく聞くようになり、開発者の方であればReactやAngularJS、Vue.jsなどのSPAに関する開発言語を一度は聞いたことがあるのではないでしょうか。今回取り上げるのは最近トレンドのVue.jsです。今でこそSPAの開発がもてはやされていますが、MPA(マルチページアプリケーション)での開発も少なくないと思います。大規模開発のため機能ごとに画面を分けたいというような希望もあるかもしれません。そんな開発者(私も含む)のためにVue.jsでの開発でwebpackを利用した際のMPA開発環境構築についてご紹介します。荒削りな部分もありますがご容赦ください。画面ごとにエントリーポイントが存在するような感じです。インストールCLIを用いてVue.jsの開発環境を構築します。Vue.jsの開発チームがデフォルトで用意しているwebpackテンプレートを利用します。ターミナルから以下のコマンドを実行してください。init時の細かい設定は省略します。https://jp.vuejs.org/v2/guide/installation.html上記の手順によりdevサーバが立ち上がり「http://localhost:8080」のURLから確認できるようになります。webpackのコンフィグ変更webpackテンプレートではhtml-webpack-pluginというプラグインがインストールされます。このプラグインは、webpackで生成されたバンドルファイルに対応したHTMLファイルを生成する役割をもっています。MPAに対応するためにはこのプラグインのコンフィグを変更することになります。(ビルド時のコンフィグ)開発環境コンフィグを覗くと、以下のような記述があります。記載しているindex.htmlファイルがプロジェクトの中にも含まれていることが確認できます。これまでwebpackを利用したことがない方はここを発見するのに苦労するのではないかと思います。true}),next.htmlを新しい画面として作成する場合、変更対象のコンフィグファイルは以下のような記述となります。true}),※ページ間で差異がなけばtemplateは共通でも問題ないです。'dependency'}),※chunksは対応するバンドルファイルを指定するためのものです。entryのkey名を指定します。ソースファイルの作成こちらでもnext.htmlを作成する前提で進めます。(テンプレートファイル)単純に動作確認をするだけであればmain.js、next.htmlのコピーで問題ありません。devサーバを再度立ち上げターミナルで一度devサーバを終了します。終了するには「control」+「c」で終了できます。すると「http://localhost:8080/next.html」でも画面が見れるようになります。next.htmlのtitleタグを変更するとわかりやすいかもしれません。以上でMPAの開発環境構築は終わりです!お疲れ様でした。設定例なのでお好みで設定変更してください。