タスクランナーとの使い分け

webpackはこうした性質上、タスクランナーであるGulpGruntの代わりとして紹介されることがしばしばあります。Googleトレンドで見ても、2017年4月現在ではタスクランナーGulpと肩を並べるほどwebpackは人気です。

2015/4~2017/4のGoogleトレンド調査(カテゴリー:コンピュータ)

タスクランナーでできることの多くはwebpackでも可能です。しかし、プロジェクトによってはタスクランナーGulp、Gruntの資産があり、webpackを部分的に採用したいケースもあるでしょう。また、webpackは「CSSや画像を含むあらゆるアセットファイルをJavaScriptとして出力する」ことが基本的な使い方となっているため(※)、CSSや画像をそのまま扱いたい時はタスクランナーが必要になります。

webpackとタスクランナーはどちらか一方を使うものではなく、併用して使うことが望ましいのです。Gulpとwebpackを連携するための方法は、筆者のQiitaの記事「Gulpで始めるwebpack 入門」を参照くださいませ。

※ webpackのプラグインを使えば別ファイルとして出力可能ですが、設定が煩雑になります。また、フォントや音声といったバイナリファイルはJavaScriptには出力されません。

他のモジュールバンドラーとの比較

モジュールバンドラーとして知られているのはwebpackだけではありません。かつてはBrowserifyRequireJSといったツールもありました。Googleトレンドで調べてみると、2014年頃はRequireJSが比較的使われていましたが、現在はwebpackが一強という状態となっています。

2014/4~2017/8のGoogleトレンド調査

webpackは他のモジュールバンドラーと比べて、多機能であり拡張性に優れています。JSに関してはES ModulesをサポートしておりTree Shaking(未使用のモジュールを省いてバンドルする機能)が使えることがwebpackの強みです。

BrowserifyはCommonJS仕様がベースで(module.exportsrequire()のような独自に定義された変数やメソッドを使う仕様)、Tree Shakingが使えないという点で旧世代のツールです。枯れた技術としてはRequireJSやBrowserifyの利点はありますが、標準仕様のES Modulesをネイティブで利用できるwebpackのほうが将来性があるといえそうです。

webpackは次世代の標準となりうる技術

大規模なJavaScriptの開発にはモジュールシステムの導入は必須。webpackはJavaScriptのモジュールを扱いやすくするのはもちろん、他のアセットファイルの取り扱いにも長けているという他に類を見ない技術です。

筆者もここ最近webpackを使っていますが、多機能で使いやすく、現在人気になっているのも納得できました。トレンドから見てもタスクランナーと並んで今後標準のウェブ開発技術になることが予想されます。是非この機会に触れてみてください。

(編集部注*この記事は2016年5月23日に公開された記事を再編集したものです)