webpack
loaderランキング2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
自己紹介
ナカムラダイキ
株式会社LIG
フロントエンドエンジニア
略歴
バックエンドエンジニア経験後
昨年9月から
LIGにフロントエンドエンジニアとして
ジョイン。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1061898/daiki_avatar_1413085231-210x210.jpg)
フロントエンド開発でwebpackを導入した結果
loaderがすごくよかったのでランキングにしました。
普段開発をejsやsass、altjsで行い、
gulp等のタスクランナーでウォッチさせてるような方へ
向けたお話となります。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
webpackとは
jsの依存関係を解決して一つにするツール
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./assets/js/TweenMax.min.js"></script>
<script src="./assets/js/jquery.scrollmagic.min.js"></script>
<script src="./assets/js/slider.js"></script>
<script src="./assets/js/feed.js"></script>
<script src="./assets/js/common.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/bundle.js"></script>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1067314/687474703a2f2f7765627061636b2e6769746875622e696f2f6173736574732f6c6f676f2e706e67.png)
リクエスト数少なくなって
パフォーマンスあがるよね
普通に一つにするよりも
パックする順番など気にしなくてOK
・一つまたは複数のエントリーポイントと呼ばれるjavascriptを用意。
そこに処理を書いていく中で呼びたいところでjqueryプラグインや、自作モジュールをrequireして使う。
・モジュールはCommonJs形式で書くと大体うまくいく。
・ビルド時にrequireしたパスを探して中身を書き出して一つのjsとして出力。
・タスクランナーと組み合わせてとても効率化できる。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
特徴
・その中でloaderという機能がヤバイ。
js、html、css、画像、json何でもrequireして読み込むことができるwebpackといえばの機能。
・学習コスト、日本語情報が少ないデメリット。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
特徴
第3位
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
coffee-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
その名の通りcoffeescriptをjsに変換して読み込むloader。
coffeescript使う人には嬉しい機能。
npm install coffee-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
第2位
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
url-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
主に画像のローダーとして使う。
js内で画像パスを書く場合に重宝。
小さい画像ならデータにして保持してくれる。
google mapのピン画像指定部分をurl-loaderで書きました。
npm install url-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
第1位
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
underscore-template-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
underscoreのテンプレートを読み込むloader。
テンプレート部分を.htmlファイルに部品として分けておくことで本体のhtmlを汚さず管理。
メンテナンス性や、他ページで使いまわしがきくといったメリットがある。
npm install underscore-template-loader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
まずは
まとめ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
npm install webpack
ご静聴ありがとうございました。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)