webpackで
開発をより効率化しよう
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
自己紹介
まろC
株式会社LIG
フロントエンドエンジニア
略歴
3年前バックエンドエンジニアとして
web業界に殴り込み、昨年9月から
LIGにフロントエンドエンジニアとして
ジョイン。
好きなAWSはS3
![](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)
フロントエンド開発で
gulp等のタスクランナー使いつつ
sass,ect,ejs,coffeescript等のaltjs
で開発しているが
もう一歩踏み込んだフロントエンド開発をしたい方へ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
webpack使いませんか
というお話。browserifyのことは話しません
webpackとは
jsの依存関係を解決して一つにするツール
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
Text
<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)
リクエスト数少なくなって
パフォーマンスあがるよね
これだけだと普通に圧縮して
一つにくっつければ
いいんじゃない?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
例えばgulpタスクで圧縮して
結合しようとした場合、
順番や、パスを気にしなければ
なりません。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
でもwebpackなら順番気にせず
使うところでrequireすれば、
jsでもhtmlでもcssでも画像でも
ビルド時そのモジュールを探して
パックしてくれます。
パスもbowerや自作プラグインから
気にせずいけます
依存性解決
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
main.js
bundle.js
jquery.js
script.
js
slider.js
index.js
Tweenmax
.js
feed.js
under
score
.js
template
.html
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
require
デザインパターン
global
・例えばPC/SPディレクトリ分けている開発環境の場合、共通に使いたいjsを一つの場所からrequireすればわざわざコピーして使わなくてもいい
・jquery等グローバルに出す設定をすることで
requireせずに使用できる
・requireを意識することで
jsを機能ごとの部品でつくる意識になる
共通で使えるものはファイルを分けて
classな書き方でmodule.exportsしておくなど
依存性解決ツールを使うメリット
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
他のツールでも同じ
・画像もurl-loaderでrequireすることで開発とプロダクションでの違いでエラーにならない。
・複数エントリーポイントから複数ファイルを出力することができる
・underscore-template-loaderでテンプレートhtmlとして保存。使いたいところで動的読み込み
webpackのメリット
loaderという最強ツールを使えばいい感じになる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
・coffee-loaderでcoffeescriptで書いてもOK
requireするファイルはjs、coffee混在OK
・jqueryプラグインによってはrequireしても
一工夫必要なものもあります
(scrollmagicがそうでした。)
・日本語情報の少なさ
デメリット
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daikinakamura/images/1056923/icon-lig.jpg)
機能がたくさんあって普通のweb制作には持て余すところもありますが、
便利です。
js設計においてもモジュール化の意識を高めることができました。
まずは npm install webpack
まとめ
![](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)