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

# レガシーな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
```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
```javascript:assets/js/foo.js
var Foo = function() {
  this.name = 'foo'
}
```
```javascript:assets/js/bar.js
var Bar = function() {
  this.name = 'bar'
}
```
```javascript:assets/js/hoge.js
var Hoge = function(foo, bar) {
  this.call = function() {
    console.log(foo.name)
    console.log(bar.name)
  }
}
```
```javascript:assets/js/main.js
var hoge = new Hoge(new Foo, new Bar)
hoge.call()
```
## bundleするために必要なこと
1. 各モジュールを`module.exoports`を使用してエクスポートする
2. `assets/js/main.js`ファイル内で`require()`を使用して各モジュールを読み込む

### 各モジュールを`module.exoports`を使用してエクスポートする
作成したモジュール名(function名)をexportsする

```diff:assets/js/foo.js
var Foo = function() {
// 省略
}

+ module.exports = Foo
```
```diff:assets/js/bar.js
var Bar = function() {
// 省略
}

+ module.exports = Bar
```
```diff:assets/js/hoge.js
var Hoge = function() {
// 省略
}

+ module.exports = Hoge
```

### `assets/js/main.js`ファイル内で各モジュールを読み込む
`require()`を使用し、`<script>`タグで読み込んでいたファイルを読み込む

```diff: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ファイルのみ読み込むようにする

```diff: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

```javascript
const path = require('path');

module.exports = {
  entry: './assets/js/main.js',
  output: {
    path: path.resolve(__dirname, 'assets/dist'),
    filename: 'bundle.js'
  }
};
```
#### webpackの実行
webpackのインストールとスクリプトの設定

```json: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.
```
以上です。
やり方が間違っていたり、もっと良い方法がありましたらご教示ください。