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.

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

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