概要
エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。
今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。
設定方法
vue-cli の2系までは webpack.config
に entry
を記述することで、複数のエントリーポイントに対応する事ができました。1
しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config
が生成されません。
その代わりに vue.config.js
に vue-cli の設定を記述することができます。2
この中で pages
オブジェクトとして、複数のエントリーポイントを定義することができます。
この状態を multi-page mode
と呼びます。
vue.config.js の用意
ルートディレクトリに vue.config.js
を作成します。
module.exports = {
pages: {
index: {
entry: 'src/entry-point/index/main.js', // エントリーポイントとなるjs
template: 'public/index.html', // テンプレートのHTML
filename: 'index.html' // build時に出力されるファイル名
},
signin: {
entry: 'src/entry-point/signin/main.js',
template: 'public/signin.html',
filename: 'signin.html'
}
},
devServer: {
historyApiFallback: {
rewrites: [
{ from: /\/index/, to: '/index.html' }, // index.html に飛ばす
{ from: /\/signin/, to: '/signin.html' }
]
}
}
}
今回は index
と signin
の2つをエントリーポイントとして設定しています。
vue.config.js の適用
multi-page mode
では html-webpack-plugin
と preload-webpack-plugin
を必要としています。
よって、pages
の変更時には vue inspect
を実行する必要があります。
これは忘れがちなので気を付けましょう。
baseUrl
を設定していない場合は、これで複数のエントリーポイントに対応することができました。
baseUrl を設定している場合
baseUrl を指定している場合は注意が必要です。
ドキュメントの devServer
の項目には以下の文章が記載されています。3
Some values like publicPath and historyApiFallback should not be modified as they need to be synchronized with baseUrl for the dev server to function properly.
historyApiFallback
などの値は、devサーバーが正常に機能するために baseUrl
と同期する必要があるようです。
対応策として <base>
タグをテンプレートに差し込んで上げる必要があります。
-
baseUrl
がvue-app
の場合
<!DOCTYPE html>
<html>
<head>
<base href="/vue-app/">
...
</head>
<body>
...
</body>
</html>
その他
devServer
を用いて設定を行なっているので、本番環境へのデプロイは別途設定が必要なことに注意してください。
Firebaseだと ここら辺 が参考になりそうです。