初めてのWebpack

今回はWebpackについて紹介したいと思います。
私自身は今回初めて使ったのですが、小規模なプロジェクトの途中から導入していて、
使ってみて結構良い感じなので記事にしてみました。

Webpackとは

Node.jsでサーバーサイドで動かすモジュールバンドラーツールになります。
Node.jsでモジュールという単語を聞くと、「npmやbowerとかと何が違うの？」みたいな印象を持たれる方もいるかもしれませんが、基本的にはそれらとはまた違った役割をもっています。

npmやbowerはJSライブラリのバージョン管理などの目的としてよく利用されますが、WebpackはJSファイルのコーディングの部分で開発者の手助けをしてくれるのです。

Webpackの基本的な役割

5枚ほど図を書いてみましたので、画像とともに紹介していきます。

今回出てくるライブラリたちの紹介

今回使うライブラリは下記のような構成にしてみます。

・npm : Node.js側のライブラリ（開発ツール）の管理
・Bower : フロントエンド側のライブラリの管理
・Gulp : タスクランナー
・Webpack : モジュールバンドラー。フロントエンドのJSファイル生成。

※ Bowerとnpmでフロントエンド側と開発ツール側のソース管理を分けた理由については後述

画像1

各ライブラリの役割について

npm は Node.js側のライブラリの管理

npmはNode．js側のライブラリのインストールしたり、package.jsonファイルで
ライブラリのバージョンを指定して管理をすることが出来ます。
今回はWebpackの紹介なので特にnpmについては紹介しません。

画像2

Bower はフロントエンド側のライブラリの管理に特化

npmでも実はjQueryとかAngularとかは用意できます。
ただ今回は、フロントエンドのライブラリに特化したBowerを導入して、
フロントエンド側のライブラリとNode.js側のライブラリの管理を分けています。

またメリットはただ管理を分けるところだけではなく、Webpackでフロントエンドの
ライブラリだけ取り扱いたいときにBowerを指定するだけになり、かなり楽になるメリットが有ります。

画像3

だんだんとファイルが増えてきて、HTMLのheaderにCSSとJSの読み込みの記述も増えてきて、管理が大変になってきました。
ここでWebpackの登場ですが、WebpackもLessやSassのコンパイルツールみたいなものなので、Gulpによるタスクの管理をしたいと思います。

Gulp は変換系の『タスク』を管理

GulpはLESSやSCSS、ReactのJSXなど、ES2015でかかれたJSなど変換する必要があるファイルを
どういう処理で変換し、変換したファイルをどこに出力するか『タスク』として管理してくれます。

今回は新たにWebpackでモジュール管理をするためのタスクをGulpで追加します。

画像4

Webpack は JS、CSSを一つのファイルにまとめ上げます

Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルに
まとめてくれます。
また、JSライブラリで読み込む必要があるCSSファイルたちもJSにまとめてくれます。（私達が書くCSSもまとめることが可能です。）
そして、それらのCSSで読み込む画像ファイルもDataURI(Base64形式)に変換してJSファイルに
まとめてくれます。

つまり、JS、CSS、画像ファイルを一つのJSファイルにまとめてくれます。

画像5

※ ちょっと誤解を招きそうなのですが、ここで出てきている画像ファイルはWebpackで扱う主に『CSSで読み込まれる画像』を想定して書きました。また、DataURIにしているのはこちらがそうなるように設定している(npm の url-loaderを利用している)だけで、通常のファイル読み込みのままにすることも出来ます。

Webpack を使った実際のコーディングはどんな感じ？

『Webpack は JS、CSSを一つのファイルにまとめ上げます』というところにはもう一つ意味があって、
『JSファイルを細かく分けて管理することが可能になる』という意味にもなります。

webpackの基本的な使い方は以下のようになります。

main.js

var mymodule = require('./mymodule');
mymodule('こんにちは');

mymodule.js

module.exports = function(str) {
     alert(str);
};

ここでは単純に関数の例を出しましたが下記のように1クラスの1ファイルのような管理も可能です。

main.js

var roadedMymodule = require('./mymodule');
var Mymodule = new roadedMymodule();
Mymodule.myfunction('Qiitaさん');

mymodule.js

function myclass() {
     this.alertString = 'こんにちは ';
};

myclass.prototype.myfunction = function(name) {
     alert(this.alertString + name);
};

module.exports = myclass;

※ ここででてくるrequire()関数はWebpackで変換され、webで読み込まれるJSの記述としては残らないので、
require()関数が定義されておらずエラーが発生するなんてことはありません。

基本的には1ファイル、1クラスの書き方になるのかなと思っています。（module.exportsとrequireの関係から）
また、コンパイル後のファイルを見ていただくとわかると思うのですが(ここでは紹介していません)、
変数をglobalとしてvar aaa = ... と定義しているものが基本的にglobal領域ではなくなったり…。
なので、既存のプロジェクトをこちらに移す場合はここで結構骨が折れそうです。

出力されるJSはどんな感じ？

実際に生成されるJSは下記のような内容になります。

・私が書いたJS
・利用しているJSライブラリ(Bower)
・JSライブラリで使用されているCSS(Bower)
・デザイナーさんが書いたLESS
・CSS類から利用されるImage(今回はDataURIへ変換)

が記述されており、それらが一つのファイルにまとまっています。

HTML側から呼ぶファイルも、もちろん1つだけ

sample.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サイトのタイトル</title>

    <!-- metaタグの記述　中略  -->

    <script src="./js/bundle.js"></script>

</head>

他のCSSやJSの読み込みの記述は一切いりません。bundle.jsにすべて記述されているからです。
どうでしょう。いわゆる今風な感じのヘッダーな感じがしますよね。

また静的のファイルでよく悩まされるのが『ブラウザキャシュで古い静的ファイルが読み込まれてしまう』問題かと思いますが、今回のような場合、生成されたbundle.jsを新しく読み込ませればすべての静的ファイルが更新できます。