概要
エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。
今回、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だと ここら辺 が参考になりそうです。