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