webpack/packeage.jsonとは
webpackは、javascriptやcssのモジュール管理に使います。
実際はlaravelの場合は
vue/tailwind/axios
等のモジュールのインストール情報をここに書き込んだりしています。
なぜwebpackを使うか？
webpackをなぜ使うか？ですが、jsのパッケージを元々は呼び出す場合にhtmlで下記の呼び出しします。
<script type="text/javascript" src="hoge1.js"></script>
<script type="text/javascript" src="hoge2.js"></script>この場合jsの呼び出し順や、依存等をその都度管理したり、する必要があります。その依存関係を解決する為にwebpackを使用すると解決できます。
package.jsonにインストールするライブラリをモジュール単位で記述します。
モジュール単位とは、機能枚に整理されたライブラリになります。
機能枚にライブラリ化する事で各ライブラリを取り込む事や、ソースの管理を向上しています。
モジュール単位でなく全ての機能が一個に書かれていたら逆に管理が不便になります。
また、実際使う場合には各モジュールを下のコマンドで一個のファイルに変換します。
npm run dev変換する事によって、実行速度の高速化も見込めます。
packeage.jsonとpackage-lock.jsonの違い
package.jsonはバージョンをどこからどこまでのバージョンをインストールすると範囲をしてします。
例えば
“axios”: “^0.21.1”,
と記述した場合axiosの0.21.1以下を他の依存性を含めて問題ない形でインストールしてくれます。
pakage-lock.jsonはpackage.jsonを元に範囲の中から実際どのバージョンがインストールされたかを記述します。こちらはいじる必要がなく資料程度に認識していれば大丈夫です。
最初は何をやっているか分からないツールで戸惑ったのですが、覚えると凄く便利なツールなので使いこなせると良いです。
またphpのモジュール管理ツールのcomposerもあるので後日こちらについても書きたいと思います。