webpack

loaderランキング2015

自己紹介

ナカムラダイキ

株式会社LIG

フロントエンドエンジニア

略歴

バックエンドエンジニア経験後

昨年9月から

LIGにフロントエンドエンジニアとして

ジョイン。

フロントエンド開発でwebpackを導入した結果

loaderがすごくよかったのでランキングにしました。

普段開発をejsやsass、altjsで行い、

gulp等のタスクランナーでウォッチさせてるような方へ

向けたお話となります。

webpackとは

jsの依存関係を解決して一つにするツール

<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>

リクエスト数少なくなって

パフォーマンスあがるよね

普通に一つにするよりも

パックする順番など気にしなくてOK

・一つまたは複数のエントリーポイントと呼ばれるjavascriptを用意。

そこに処理を書いていく中で呼びたいところでjqueryプラグインや、自作モジュールをrequireして使う。

・モジュールはCommonJs形式で書くと大体うまくいく。

・ビルド時にrequireしたパスを探して中身を書き出して一つのjsとして出力。

・タスクランナーと組み合わせてとても効率化できる。

特徴

・その中でloaderという機能がヤバイ。

js、html、css、画像、json何でもrequireして読み込むことができるwebpackといえばの機能。

・学習コスト、日本語情報が少ないデメリット。

特徴

第3位

coffee-loader

その名の通りcoffeescriptをjsに変換して読み込むloader。

coffeescript使う人には嬉しい機能。

npm install coffee-loader

第2位

url-loader

主に画像のローダーとして使う。

js内で画像パスを書く場合に重宝。

小さい画像ならデータにして保持してくれる。

google mapのピン画像指定部分をurl-loaderで書きました。

npm install url-loader

第1位

underscore-template-loader

underscoreのテンプレートを読み込むloader。

テンプレート部分を.htmlファイルに部品として分けておくことで本体のhtmlを汚さず管理。

メンテナンス性や、他ページで使いまわしがきくといったメリットがある。

npm install underscore-template-loader

まずは

まとめ

npm install webpack

ご静聴ありがとうございました。