【初心者向け】JavaScriptファイルはwebpackによって一つにまとめられる

## webpackって何？
かつてのJavaScriptは、ファイル分割したコードや外部のライブラリを、index.htmlのscriptタグなどで読み込んでいました。
```html:index.html
<body>
   <script src="hoge.js"></script>
   .
   .
　　　　　　<script src="http://fuga.js"></script>
</body>
```
しかし、読み込むファイルが増えるにつれて、**変数名が被ってしまう**、**通信環境によって読み込みに時間がかかる**といった問題が起こります。

この問題の解決策として、複数のJavaScriptを適切に変換して一つのファイルにまとめる「バンドル」という手法が生まれました。**webpack**は、今最も主流なバンドラーであり、ReactやVue.jsといったフレームワークの内部でも利用されています！

webpackは、JavaScriptだけでなくCSSや画像などもバンドルでき、JavaScriptのさまざまな形式の依存関係に対応していたことから、現在では非常に人気のあるバンドラーとなりました。

:::note info
近年のフロントエンド開発ではファイルを「モジュール」として分けて開発することがほとんどです。
`module.exports`, `require`といったCommonJS形式の構文や、
`export`, `import`といったESModlesの構文を見たことがある人もいると思います。
webpackは、複雑に依存しあうモジュールも一つのJavaScriptファイルにまとめることができます。
:::

## どうやって使うの？
ここでは、具体的な使用方法というよりは、こんな感じで使うんだなというイメージを掴んでもらえればと思います。

※node.jsを使用するので、インストールしておいてください。

- まず、作業用のディレクトリをVSCodeなどのエディタで開き、ターミナルを開きます。
（VSCodeの拡張機能によって画面は異なります。）
![スクリーンショット 2023-05-05 22.22.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483874/36580ee3-442a-72c7-0d52-5f7242bfda4d.png)

- ターミナルに以下のコマンドを入力すると、`package.json`というファイルができます。

```sh
npm init -y
```

- 続いて、以下のコマンドを入力します。これで、webpackをプロジェクトにインストールします。
```sh
npm install -D webpack webpack-cli
```

package.jsonの中はこんな感じ。`devDependencies`の下に`webpack`と`webpack-cli`が入ります。
![スクリーンショット 2023-05-05 22.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483874/5eee1f81-cb88-9b74-f2fc-bfc5324b2f6e.png)

- srcディレクトリを作成し、その配下に`index.js`と`hello.js`を作成します。
```js:src/index.js
// import 文を使って hello.js ファイルを読み込む。
import { hello } from "./hello";

// hello.jsに定義されたJavaScriptを実行する。
hello();
```

```js:src/hello.js
// export文を使ってhello関数を定義する。
export function hello() {
  alert("hello world!");
}
```

- これでwebpackを使う準備ができました。以下のコマンドを入力し、早速webpackを使用してみます。
```
npx webpack
```

webpackを使用することで、`index.js`と`hello.js`という二つのjsファイルの内容が、dist/main.jsにパフォーマンスが最適化された状態で出力されます。(出力されるファイル名や形式はカスタマイズできます。）
```js:dist/main.js
(()=>{"use strict";alert("hello world!")})();
```
このファイルの内容を解読できる必要はありません。あとは、この`main.js`を`index.html`で読み込むだけです。
```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="dist/main.js"></script>
  </body>
</html>
```
無事、`hello world!`が表示されるはずです。

## Reactではどう使われている？
`create-react-app`でreactプロジェクトを作成すると、package.jsonには一見webpackの文字が見当たりません。webpackはReactのロジックの中に隠されていて、特に設定しなくても使えるようになっているようです。
> 内部では Babel と webpack を利用していますが、それらについて知る必要はありません。
(React公式　「新しいReactアプリを作る」より)

しかしながら、scriptsオブジェクトを見ると、`react-scripts`というライブラリを使っていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483874/3846aae3-b38f-79d5-ea2b-42fb6fdff1f9.png)
`node_modules`の中から、`react-scripts`を探してみましょう。

![スクリーンショット 2023-05-07 13.33.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483874/2335797e-3c06-d9d6-e3a5-a5382134cbcf.png)
ありました！

`package.json`にはwebpackの記述がありますし、`config`ディレクトリ内にはwebpackの設定ファイルである`webpack.config.js`があります。

Reactプロジェクトを立ち上げると、`react-scripts`を通じてwebpackがjsファイルを一つにまとめてくれるようですね！

`npm run build`を実行すると、`build`ディレクトリができ、その中にバンドルされたjsファイルなどが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483874/6f89fee4-f5f8-037d-b890-89acd1d4106b.png)

reactで作られたコンポーネント等も最終的には純粋なjsファイルにまとめて変換され、それを`build`ディレクトリのindex.htmlで読み込んで表示しています！

## まとめ
近年のフロントエンド開発では、ファイルを「モジュール」として複数に分けて開発し、本番用にそれらを「バンドル」しています。Webpackは、多様なモジュールシステムへの対応、拡張機能を提供することで、Webアプリケーションのビルド全般をカバーすることができます。WebpackはReactやVue.jsなどのフレームワークにも使われており、今後もさらに進化していくことが予想されます！