本日は初学者に向けて、少しでも早くReact開発者になれるようにスキルアップをして頂く為に
『Webpack＋Babel』を学ぶ前に知っておくべき、知識をなるべく短くざっくりと解説致します。
なるべく脱CRA（create-react-app）になれるように頑張りましょう。
Webpackとは？
Webpackを使用すると、ES6標準に基づくモジュールシステムが高度にサポートされます
『※多くのモジュールシステム標準をサポートしますが、最新のものはES6となっております』
『Webpack』は、JavaScriptアプリケーションで広く使用され、かつReact開発者に選ばれるバンドラーでもあり、
優れたサポートと優れたチームがそれを維持しています。
プロジェクトファイルを1つのファイルにバンドルできるモジュールバンドラーです。
そして高度な設定が可能となります。
『Webpack CLI』は、ターミナルを介してWebpackを使用していくためのものです、これをスクリプトで使用します。
ルートフォルダーに『webpack.config.js』ファイルが必要となり。
Webpackにアプリケーションの操作方法を指示する場合は、『エントリポイント』情報と出力情報を記述することで実行できます。
明確にするための「エントリ」ポイントは、アプリケーションが開始される場所であり、
『相対パスの値』を指定して設定します。
それから『outputプロパティ』は、出力を出力する場所の設定とそれらのファイルに名前を付ける方法を示しますが、エントリーポイントと出力先を変更する場合はしっかりと理解できていないと泥沼にハマります。
『Webpack DevServer』では
ファイルの変更を自動的に監視し、保存時にバンドルを自動的に更新してくれます。
ライブサーバーを使用している間はバンドルは『dist』フォルダーではなくメモリ（RAM）に存在するため、非常に高速で更新できます。
モジュールのダウンロードやインクルードのプロセスを自動化するので、『フレームワーク』『ライブラリ』で頻繁に使用されています。
フロントエンドでのボイラープレートが内部でどのように機能するかを理解することができるので
最新のフロントエンドエコシステムを理解することは、あなたにとって最も重要な事です。
なぜwebpackが必要なのですか??
簡単に言ってしまえば
『JavaScriptを最適化することです』。
これにより、人気のあるサイトのサーバーへの負担が軽減され、クライアントのページ読み込み時間が短縮されます。
もちろんですが、それほど単純な事ではありません。
通常ではブラウザにロードされるバンドルは1つだけです。
貴方は沢山のJavaScriptファイルを書いてるかと思います。
それらの沢山のファイルは、他のファイルへ『インポート』『エクスポート』をして読み込んでいかなければいけないのは、学んでいる方々ならご存知かと思います。
この『インポート』などは、あるモジュールシステムを使用しています。
例えば『CommonJS』や『ESM import』です
JSを理解してる方なら聞いた事がありますね？
しかし
『CommonJS』はブラウザのサポートはなく、『ESMのサポート』はまだ一般的ではありません。
貴方が作成した全てのファイルを取得し、それらの依存関係を追跡した後に『1つのJSファイル』として結合(バンドル)できるツールが必要となります。
それがJavaScriptのバンドラーの１つである『Webpack』です。
『webpack』がアプリケーションを処理したとき、アプリケーションが必要とするすべてのモジュールを含む依存関係を再帰的に作成し、
それらすべてのモジュールを少数のバンドルに変換します。
結果としてこれは、多くの依存関係を使用し始める場合に効果的と言えます。
このモジュールは、最新のWebアプリを作成する場合に学習して使用する必要があります。
Babelとは何ですか？
『Babel』は、『ECMAScript 2015』 +『コードを現在および古いブラウザまたは環境で下位互換性のあるバージョンのJavaScriptに変換するために使用されるツールです。
そして『Babel』はJSX構文を変換できます。
つまりReactの現在のバージョンではES6からES8の構文を使用しています。
これらの構文で記述されたコードを、『古いブラウザが理解できるコードにコンパイルするためにBabelが必要です』。
もう一度言いますが、『Babel』は下位互換性を確保するためにあるという事です。
ReactでのWebpack
Reactを使用したとき、私たち全員がCRA（create-react-app）を使用します。
構成を処理してくれることで後は『React』に集中できるので、すばらしいツールとなっています。
ですが『Webpack』は、『React』を操作するための優れたツールの1つとなります。
不要なように感じますが、『React』を使用するときに非常に役立つ最も重要なものの1つなのです。
あなたがビジネスや就職のためにReactでWebpackを使うことに向かっているなら、ここでの記事はあなたのためだけの学習となります！。
利点はプロジェクトをより細かく制御できることであり、TypeScriptのすべての利点も得られます。
特にSPA(シングルページアプリケーション)を開発している場合では
このモジュールを使用する利点を実際に確認できます。
このモジュールは、『Babel』などのトランスパイラーを同時に使用してJSX構文を読み取り可能なJSコードにトランスパイルできるためです。
『Webpack』は内部のキャッシュを使用してモジュールを1度だけロードし
デバッグ中にページが完全に読み込まれるまでにかかる時間も短縮されていきます。
本日はここまでにしときます。
ReactでWebpackを使用するためにどのように設定し構築していくは、近いうちに記事にしたいと思っていますので、お待ちください。
ですが記事にするのに時間が、かかりそうなので
2022年以降となります。
その時は是非、当ブログの記事にお越し下さい♪
最後までお読み頂きありがとうございました。