ポートフォリオに導入しているwebpack

「gulpfile.jsの中身をタスク毎に分割しました！」でwebpackの設定については割愛させていただきましたので、今回はこちらにフォーカスしていきます。(こちらも試行錯誤中ですのであくまでご参考までにどうぞ🙇‍♂️)

フォルダ構造

まず、自分がwebpackで行っていることとしては主にJavaScriptファイルのみのバンドルになります。説明のためにJavaScriptファイル名は実際のものと変えています😅

script01.min.jsにバンドル

・src/assets/js/modules/_scriptA.js
・src/assets/js/modules/_scriptB.js
・src/assets/js/modules/_scriptC.js
上記JavaScriptファイル3つをwww/assets/js/script01.min.jsへバンドル

script02.min.jsにバンドル

・src/assets/js/modules/_scriptD.js
上記JavaScriptファイル1つをwww/assets/js/script02.min.jsへバンドル

webpack.config.jsの中身

module.exports = {
 mode: "production",
 module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',   //loader名
         options: {                //Babelの設定
           presets: ['@babel/preset-env']
         }
       }
     }
   ]
 },
 // エントリーポイント 
 entry: {
   script01: [
     './src/assets/js/modules/_scriptA.js',
     './src/assets/js/modules/_scriptB.js',
     './src/assets/js/modules/_scriptC.js',
   ],
   script02:[
     './src/assets/js/modules/_scriptD.js'
   ]
 },
 // 出力ファイル
 output: {
   filename: '[name].min.js'
 }
}

entry: の中身のscript01: とscript02: としたものがoutput: のfilename: [name]のnameに出力ファイル名に反映されます。

そもそも、「なぜ、バンドル後のjsファイルを2つに分けているのか？🤔」
という疑問があると思うのですが、これはscript01.min.jsはtopページ以外でで使用したい機能、script02.min.jsはtopページでのみ使用したい機能で分けたかった為です。

あと、webpackでエントリーポイントを複数設定し、分けたりできるのかどうかを試したかった為です。こんなことをしなくても他のベストプラクティスがあるとは思いますので方法をご存知の方がいらっしゃいましたら、教えてください。

参考動画
Udemy
現役エンジニアのためのWebpack環境構築入門 with Babel｜Sass｜Eslint
https://www.udemy.com/course/front-env-setting-webpack/learn/lecture/16815346#overview