フロントエンドの仕事をするにあたり、どのようにしてJSのソースをモジュール化すればいいのか、ずっと考えていました。<head>にずらっと並んだ<script>タグはどうにもまずいだろうと。何とかしなくてはならない。おそらく、解はnodejs, RequireJSあたりにあるのだろうな、、と思っていたのですが、色々調べた結果webpackに行き着きました。
webpackはnodejsのパッケージで、jsファイルやcss, json, png, svg、、、その他諸々を一緒くたにしてくれるもの。すなわち「module bundler」。トランスパイル（coffee->js、scss->cssなど）を間に挟むこともできるので、coffeeやES6で書かれたJSやscssなども全て１つのjavascriptファイルに（そう、cssもすべてJSのなかに詰め込んでしまう！）バンドルしてくれる。バンドルされたJSは、ブラウザで実行可能なjavascriptファイルであり、バンドル時にwebpackがファイルの最適化なども行ってくれたり、js以外のアセットは他ファイルに出力してくれたり、、など細かい設定が可能。expressサーバーをベースにした簡易的な開発用サーバーもビルトインされているので、フロントエンドの開発環境にはもってこいでは？！と考え、今後の仕事に使っていこうと判断した次第。
当初の僕のモチベーションはjavascriptファイルのモジュール化だったのですが、webpack導入による最も大きいメリットは「サイトの表示速度を上げる」ことになるのでしょう。もちろんその背景にはモバイル対応というのがあり、ページロードのスピードというのはとても大事、避けて通れないわけです。同時にCDNの導入なども検討しなくてはならないし、これもフロントエンドのモジュール設計に大きくかかわってくる。一言でmodule bundlerといっても、実はかなり奥が深いものなのだと改めて認識した次第です。(参考：12 expert tips on how to boost web performance)
というわけで、このwebpackを軸にしたフロントエンド開発環境と、僕が基本としている開発フローについて今後書いてきたいと思います。
