レガシーなJavaScriptの構成をwebpack4を使ってまとめる

後述するような形で構成しているWebページがあり、今のままだとファイルの更新はまだ良いのですが、新しいファイルの追加を行う場合にHTMLファイルにscriptタグを追加する作業が必要になってしまうため、
せめてJavaScript部分だけでもなるべく工数をかけずに１つのファイルにまとめたいと思い
調べてみました。

bundleする以前の構成

index.html
assets/js/foo.js
assets/js/bar.js
assets/js/hoge.js
assets/js/main.js

HTML

index.html

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <!-- 省略 -->
    <script src="assets/js/foo.js"></script>
    <script src="assets/js/bar.js"></script>
    <script src="assets/js/hoge.js"></script>
    <script src="assets/js/main.js"></script>
  </body>
</html>

JavaScript

assets/js/foo.js

var Foo = function() {
  this.name = 'foo'
}

assets/js/bar.js

var Bar = function() {
  this.name = 'bar'
}

assets/js/hoge.js

var Hoge = function(foo, bar) {
  this.call = function() {
    console.log(foo.name)
    console.log(bar.name)
  }
}

assets/js/main.js

var hoge = new Hoge(new Foo, new Bar)
hoge.call()

bundleするために必要なこと

各モジュールをmodule.exoportsを使用してエクスポートする
assets/js/main.jsファイル内でrequire()を使用して各モジュールを読み込む

各モジュールを`module.exoports`を使用してエクスポートする

作成したモジュール名(function名)をexportsする

assets/js/foo.js

var Foo = function() {
// 省略
}

+ module.exports = Foo

assets/js/bar.js

var Bar = function() {
// 省略
}

+ module.exports = Bar

assets/js/hoge.js

var Hoge = function() {
// 省略
}

+ module.exports = Hoge

`assets/js/main.js`ファイル内で各モジュールを読み込む

require()を使用し、<script>タグで読み込んでいたファイルを読み込む

assets/js/main.js

+ var Foo = require('./foo.js')
+ var Bar = require('./bar.js')
+ var Hoge = require('./hoge.js')

var hoge = new Hoge(new Foo, new Bar)
hoge.call()

HTML内の<script>タグを利用して読み込んでいた各モジュール削除し、bundle後のJavaScriptファイルのみ読み込むようにする

index.html

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <!-- 省略 -->
-   <script src="assets/js/foo.js"></script>
-   <script src="assets/js/bar.js"></script>
-   <script src="assets/js/hoge.js"></script>
-   <script src="assets/js/main.js"></script>
+   <script src="assets/dist/bundle.js"></script>
  </body>
</html>

bundleする

コンフィグファイルの編集

webpack.config.js

const path = require('path');

module.exports = {
  entry: './assets/js/main.js',
  output: {
    path: path.resolve(__dirname, 'assets/dist'),
    filename: 'bundle.js'
  }
};

webpackの実行

webpackのインストールとスクリプトの設定

package.json

{
// ...省略...
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.41.2"
  },
  "dependencies": {
    "webpack-cli": "^3.3.10"
  }
}

実行結果

$ yarn build
yarn run v1.15.2
$ webpack --config webpack.config.js
Hash: 0e4f3138f1f49f11d380
Version: webpack 4.41.2
Time: 361ms
Built at: 2019-12-14 17:28:28
    Asset      Size  Chunks             Chunk Names
bundle.js  1.16 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./assets/js/main.js 142 bytes {0} [built]
[1] ./assets/js/foo.js 65 bytes {0} [built]
[2] ./assets/js/bar.js 65 bytes {0} [built]
[3] ./assets/js/hoge.js 138 bytes {0} [built]
✨  Done in 1.98s.

以上です。
やり方が間違っていたり、もっと良い方法がありましたらご教示ください。