こんにちは、おーしまです。
今回は、プロジェクトでwebpackを導入したので、そちらに関して書いていきます。
まず、webpackとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどを１つにまとめるツールのことです。
例えば、これまで30ページのあるwebサイトを作成していたときは、1ページごとにcssファイルとjsファイルを作成して、コード内容はすごい似ているのに、ページが違うので似たようなファイルをたくさん作っていました。また、1ファイルの記述量が増え、何をどこに書いたか分からなくなりがちでした。
それがwebpackを使用すると、
１つのファイルにまとめることができるので、jsファイルやscssファイルを、分割して書くことができ、保守性や作業分担が行いやすくなります。
jsファイルなど、読み込ませるファイルを1ファイルにまとめることができるので、webページを開く際にのリクエストの数が減ります。そうすると、読み込みが早くなるので、webページを開く時間が短縮されます。（1ファイルにまとめると可読性が悪くなるので、まとめられなかった）
<script src="./aa.js"></script> <script src="./bb.js"></script> <script src="./cc.js"></script> <script src="./dd.js"></script> //これが減る
また、本来の、webページでは「HTML」「CSS」「JavaScript」の3つのファイルが必要です。ですが実際に開発するときは、
- テンプレートエンジン (pug、Handlebarsなど)
- JSのフレームワーク（React,、Vue、Angularなど）
- Linterでの構文チェック
- CSSのプリプロセッサー（PostCSS、Sassなど）
- TypeScriptのトランスパイル
を使って開発するので、コンパイルが必要になり、webpackはコンパイルツールとしても使えます。
scssファイル、jsファイルをコンパイルする際にも、コードに変化があると自動でコンパイルし、出力できるようにする設定もあるので、一度環境を構築してしまえば、あとはストレスフリーにコードを書くことができます。
歴史
昔は、JavaScriptにはモジュールという仕様がなく、ES2015以降、標準仕様にモジュールが導入され使えるようになりました。
モジュールとは、機能を部品化したもののことで、昔は、
var Module = (function() {
// 機能
})();みたいに、変数に機能を入れて、使っていたらしいです。（今も使う？）
もともと、フロント側でしか使えなかったjsを、サーバー側で使えるようにしようという動きがあり、
node.jsが生まれました。
node.jsが生まれたことで、jsをモジュール化して使いやすくするためのツールの開発ができるようになり、そのうちの１つがwebpackでした。
webpackの初回リリースは2012年で、流行し始めたのは2015年ほどで、
2020年ではビルドツールとしての使用率は89%らしいです。（私調べ）
今回はここまでです。
それではまた。
