はじめに
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以前にモジュールバンドラの理解が深まりました。