はじめに

Typescriptを学び始めた際に、webpackについて理解を深めたくなったので整理。

webpackとは

webpackはモジュールバンドラの一つ。

そもそもモジュールバンドラが何かというと、複数のモジュールをファイルとしてまとめあげ、
それを指定した場所に出力するツールのこと。
＊モジュール＝機能ごとに分割されたファイルのこと。

webpack（というかモジュールバンドラ）の利点は後述。

webpackを使用するにはインストールの必要がある。
webpackコマンドを使用するには、webpack-cliのインストールが必要。
インストールを行ったら、webpack.config.jsでファイルの設定を行う。

webpackを使うと良い点

webpackを使うことで、機能ごとにファイル分割して開発ができるようになる。
これにより、各ファイルのコードがシンプルになったり、モジュールの再利用がしやすくなり、コードが見やすくなる。
また、モジュール化によってタスクの境界を明確化できるので、開発作業を分担しやすくなる。

webpackには多種多様な機能・設定が存在しているため、覚える必要はないがconfigの理解は必要。

例えば・・・
watchモードを使うと、ファイルを監視して変更があったらビルドを再実行できる。
また、ローダーによって、画像などJavascript以外のファイルをJavascriptで扱えるように変換してくれる。
babel-loaderを使えば、ES6で書いたコードをES5に変換してくれるため、
ES6に対応していないブラウザでも正常に動くようにしてくれる。

まとめ

webpack以前にモジュールバンドラの理解が深まりました。