webpack&モジュールバンドラ(Module Bundler)&ローダー(Loader)概要

Last updated at 2017-02-18Posted at 2017-02-18

webpack&モジュールバンドラ&ローダー

最近、webpackを使用した

その時に、webpackとモジュールバンドラ、ローダーの基本的なことについて学んだので、まとめようと思う

なお、本記事では、基本的な概念や使用する際の注意事項のメモが中心となるので、設定ファイルの説明などは行っていない

現在、最新のECMAScriptでは、1ファイル=1モジュールの考え方が考案され徐々に広まってきている
しかし、現存のほとんどのブラウザでは、それに対応しておらず、scriptタグに書かれたJavaScriptのみを実行するのが普通だ
モジュールバンドラ(Module Bundler)を使用すれば、複数のJavaScriptファイルをまとめ上げて1つのJavaScriptファイルに統合してくれる
また、HTMLにエントリポイントとなるJavaScriptファイルのみを貼っておいても、現在のブラウザではモジュール間の依存関係を解決して、他のモジュールまで利用するということはできない（複数のJavaScriptファイル間の依存関係を解決してくれない）
そこで、モジュールバンドラ(Module Bundler)は、複数に分割されたJavaScripファイル(モジュール)を1つのJavaScriptファイルにしてしまい、さらにその際に複数のJavaScriptファイル(Module)間の依存関係を解決してくれる

さらにwebpackは複数のbundle.jsをアウトプットすることもできる

=> 例えばテストには、テスト用のtest_bundle.jsを作ることができる

=>テストにおいても、JavaScriptはモジュールの分割の依存関係を解消するために、バンドルする必要があるのでそれに役立つ

複数の出力ファイルをバラバラに出力するのに参考にさせていただいたサイト

http://webdesign-dackel.com/2015/09/10/webpack-multiple-output/

webpackは循環依存は解決できない

=> 例えば、エントリポイントであるA.jsとB.jsがお互いに依存しあっている場合、ループしてしまう

=>index.js(エントリポイントとなるファイル)はimportできない

loaderとは、JavaScriptのファイル中でimportした静的リソースをブラウザで扱える形に変換してくれるものである
もっと詳しく言えば、loaderに対してパラメータ(引数)としてリソースファイルを与えると、JavaScriptで扱えるファイルに変換して返してくれる

=> 例えば、ts-loaderを使用すると、TypeScriptのファイルでimportしたファイルをjsファイルに変換してくれる

TypeScriptに対して、ts-loaderを使い、内部的に個別のjsファイルを作成する

例)A.ts, B.ts, C.tsが存在するとき、ts-loaderを使用すると、A.js, B.js, C.jsがwebpack内部で生成される
web packの本来の機能を使用して、内部的に生成された複数の.jsファイルを1つのbundle.jsにまとめ上げる

複数のJavaScriptファイルを生成しなくても、bundle.jsを生成すれば良い
例えば、Gi tHubでソースコードを管理している場合、基本的には、後で再生成可能なファイルは、Git Hub上に置かないほうがよしとされている
=> 万が一、複数のjsファイルを生成しても、それは再生成可能なファイルなので、.gitignoreするといいかもしれない