世間ではそこかしこから SPA SPA という声が聞こえて来ますが、まだ全然 Multi Page Application も作ってますよね？
そんな Multi Page Application における JavaScript の依存関係解決の話題が少ないので、長時間のググり＆試行錯誤の結果をまとめます。
どんな風にしたいのか
<!-- pageA.html -->
<body>
<div>hello</div>
<script src="commons.js"></script>
<script src="pageA.bundle.js"></script>
</body>
こんな感じでスクリプト2つ読み込むだけでOKにしたい。
commons に jquery 等のライブラリ埋め込んだり、どのページでも使う処理を書いたりしたい。
{page_name}.bundle.js にそのページでしか使わない処理を書きたい。
どうしたか→ webpack でかいけつだ！
長時間ググった割に、webpack のドキュメントにそのものズバリなものがあったので、なんだか微妙な気持ちになりました(´・ω・｀)
http://webpack.github.io/docs/optimization.html#multi-page-app
正直この記事は、上記のドキュメントがもっと見つかりやすくなるといいなと思って書いているので、
そっちで英語を読んでもらう方がよいこともあるかと思います。
自分が選んだ構成
ディレクトリ構成はこんな感じ。まだそんなに大きく育ってない
- js/
- page/
- pageA.js
- commons.js
- util/
- index.js
- page/
webpack のコンフィグは下記。
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
{
entry: {
commons: './js/page/commons.js'),
pageA: './js/page/pageA.js')
},
output: {
path: './js',
filename: '[name].bundle.js'
},
plugins: [
new CommonsChunkPlugin('commons', 'commons.js')
]
}
この構成で、webpack の gulp での使用例ドキュメント を参考に gulp でビルドするように組んでいます。
HTML は上記と同じ。まさしく実現したかったことが実現できました。webpack さんナイス。
まとめ
最近の JavaScript の話題が SPA ばっかり、趣味で勉強してるのもそればっかりだから、Multi Page Application でどうしたらいいのかって逆に調べるの難しいなと思いました 