※このエントリは弱小web系エンジニアがwebpackを試すことになった状況を淡々と綴るものです。過度な期待はしないでください。
（webpackとは何ぞやとかこういう記述をするとこうなる、みたいな難しい話は出ません。出来ません。自分の課題解決メモです）
ある日ふと、小さいWebアプリを作ってみたいと思い立ちました。
で、SeekGeeksはVue.js0.11.5+Sammy.js+Foundation5で作ってたんですが、これらはちょっと古い技術になってしまっているから、この際ちょっとアップデートしてVue.js1.x+Vue-router+Foundation6で作ってみようかなーと思って調べ始めたんです。
※ちなみにツイッターではVue.js0.12.x使ってるって書いてたんですが、昨日調べたら0.11.5でした。お詫びして訂正いたします。
で、この中ではVue-routerが一番知識が無いのでいの一番に情報収集してたんですが、どうやらSammy.jsでやってた「partialで個別のhtmlを読み込んでレンダリング」というのはできない模様。同じようなことをやりたい場合、webpackやbrowserifyを使う必要がある、と。以下、見つけた参考サイト。
vue.jsを使った大規模開発に必要なもの
Vue.js × vue-router × browserifyで SPAのHTMLの画面ごとに切り出し
…え、同じことやるのにwebpack必須なの？使ったことないんですけど？？と正直思いました。
一度は心が折れて、「じゃあSammy.jsのままでいいや…」とも思ったんですが、Webアプリを作りたい気持ち半分、Webアプリ制作を通じて成長したい気持ち半分だったので、webpackにチャレンジしてみようと思い直しました。
実際webpackってよく目にするので、覚えておいて損はないはず。
ただ実際調べ始めたら、webpackでググればいいのか最終形まで見越してwebpack+gulpでググればいいのかVue-routerも入れた方がいいのか分からず。しかもそれっぽい記事を見つけても、そういうの書くのってフロントエンド最前線！な人たちなのか、webpackだけじゃなくて当たり前のようにBabelだのaltJSだのも記事内に織り込まれてて（実際その人たちには当たり前なんだろうけど）、ついていける気がしませんでした。
仕方ないので一旦gulpは諦めて、とりあえず簡単にwebpackについて説明してくれてるサイトを探そう！という結論に。
で、まぁ参考サイトも見つけたのでコツコツ写経しながら取り組んでます。
始める前はついていけるか不安になりつつ嫌々やってたんですが、実際コマンド打ったり生成されたJSファイル見てみたらけっこうなるほどなーって思うこともあり、少しだけ面白くなってきました。
その辺のことはまた次回書こうと思います。
なんか新しいことを始める度に開発環境に新しいモジュールが増えていくのが（そしてそれを忘れていくのが）若干不安ではありますが、とりあえずやれるところまでやってみます。
続く