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

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

 

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

# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack my-project
# 依存関係をインストールしてgo!
$ cd my-project
$ npm run dev

引用元: 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を利用したことがない方はここを発見するのに苦労するのではないかと思います。

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

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

「build/webpack.base.conf.js」

entry: {
  app: './src/main.js',
  next: './src/next.js',
},

 

「build/webpack.dev.conf.js」

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),
new HtmlWebpackPlugin({
  filename: 'next.html',
  template: 'next.html',
  inject: true
}),

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

「build/webpack.prod.conf.js」

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  chunks: ['app', 'vendor', 'manifest'],
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'next.html'
    : config.build.next,
  template: 'next.html',
  inject: true,
  chunks: ['next', 'vendor', 'manifest'],
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),

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

「config/index.js」

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  next: path.resolve(__dirname, '../dist/next.html'),

  〜略〜
  bundleAnalyzerReport: process.env.npm_config_report
}

 

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)