【自分用】webpackの使い方

#webpackとは
webpackとは、HTMLやCSS、JavaScriptなどWEBサイトやWEBアプリを構成するファイルを1つにまとめてくれるツールです。

ファイルを1つにまとめることで、たくさんのメリットがあります。

####① HTTP通信の高速化
HTTP通信では、ブラウザとサーバーの同時接続数が限られるため、接続回数が増えれば、ファイルの転送にそれだけ時間がかかります。
そこで、ファイルを1つにまとめることで、サーバーとの接続回数を少なし、ファイルの転送時間を減らすことができます。

####②保守性が上がる
これまでのJavaScriptファイルは全てのファイルをHTMLに`<script>`を使い書かなければいけませんでした。そのため、読み込みが遅く、かつ可読性に優れない状況でした。
webpackでは、ECMAScript標準の公式機能であるES Modules（import文）が使え、さらにnode.jsのモジュール機能（require文）が使えるために、ファイル同士を結合できます。
モジュールを使えることで、コードの可読性が上がり、開発作業の分担やテストがしやすくなり、再利用性や保守性が上がります。

その他にもたくさんのメリットがありますが、ここでは割愛します。

参考：[webpackを使う理由](https://webpack.js.org/concepts/why-webpack/)

#webpackの使い方
Node.jsのインストールが済んでいることが前提で進みます。

webpack公式の[デモンストレーション](https://webpack.js.org/guides/getting-started/)に沿って始めます。

以下のコマンドを入力し、ディレクトリを作ります。

```console:console
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev
```
・1行目でプロジェクトを行う`webpack-demo`ディレクトリを作成しています。このディレクトリの名前はなんでも大丈夫です。
・2行目は、1行目で作成した`webpack-demo`ディレクトリに移動しています。
・3行目は、初期化処理を行い、`package.json`を生成しています。
`npm init`を行うと普通はどういうパッケージにするか質問がされるのですが、`-y`オプションを作ることで、すべてyesの回答となり、その質問を省略することができます。
・4行目で、`webpack`と`webpack-cli`のインストールを行っています。
`--save-dev`オプションをつけることで、`package.json`の`devDependencies`に`webpack`と`webpack-cli`のバージョン情報を書き込んでいます。

以上で準備が完了しました。
続いて、バンドルをするために、ディレクトリ構造とファイル、それらの中身を作成します。

```
webpack-demo
|- package.json
|- webpack.config.js
|- /src
  |- index.js
  |- sub.js
|- /node_modules
```
以上のようなディレクトリ構造を作るため、下記のコマンドを入力してください。

```console:console
$ touch webpack.config.js
$ mkdir src
$ touch ./src/index.js
$ touch ./src/sub.js
```
・1行目は、`webpack`の設定をするファイルを作成しています。
・2行目は、`src`ディレクトリを作成します。このディレクトリの中にあるファイルがバンドルされます。
・3、4行目は、バンドルするファイルを作成しています。

これでディレクトリ構成が完成しました。
続いて、ファイルの中身を編集していきます。
まずは、webpackの設定をするために`webpack.config.js`に以下のように書き込んでいきます。

```JS:webpack.config.js
module.exports = {
  //エントリーポイントの設定
  entry: `./src/index.js`,
  // 出力するファイルの設定
  output: {
    //  出力するファイルのディレクトリ名
    path: __dirname + `/dist`,
    // 出力するファイルの名前
    filename: "main.js"
  },
  //modeの設定
  mode: "development"
};
```
・`entry:`は、アプリケーションのバンドル処理を開始するポイントの設定です。`index.js`は`sub.js`のモジュールに依存しますが、最終的なエントリーポイント（HTML等が読み込むポイント）は`index.js`であるので、その`index.js`を設定しています。
・`output:`は、出力するファイルの設定をします。`path:`が出力するファイルのディレクトリ名で、`filename:`が出力するファイルの名前です。
今回は出力ファイルを`main.js`と設定します。
・`mode:`はモード設定で、`development`（開発モード）とすることで、出力される`main.js`が見やすい形で出力されます。
`mode`を`production`にすると、圧縮され見づらくなりますがその分、高速に読み取りができるようになります。

*参考：[webpackの構成設定](https://webpack.js.org/configuration/)*


続いて、そのバンドルしたい`index.js`と`sub.js`の中身を書いていきます。
今回は単純に、関数モジュールファイルとそのモジュールを実行するファイルに分けます。

```JS:sub.js
// greet関数をexportする。
module.exports = function greet() {
  document.write("Hello webpack");
}
```

```JS:index.js
// require文を使ってsub.jsファイルを読み込む。
const greet = require('./sub');
// sub.jsに定義されたgreet関数を実行する。
greet();
```

それでは、いよいよwebpackの出番です。
以下のコマンドを入力してください。

```console:console
$ npx webpack
```
すると、以下のように表示され、バンドルが完了します。
![スクリーンショット 2019-12-01 1.17.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/8b0137c5-a0db-fba9-aeb9-7632254b60a1.png)
出来上がった`main.js`ファイルを見てみるとよくわからない文字が出ていますが、これでバンドルされたファイルの完成です。

続いて、このバンドルされたファイルをhtmlで表示してみましょう。
以下のように`./dist`ディレクトリ内にhtmlファイルを作成します。

```console:console
$ touch ./dist/index.html
```
続いて、`index.html`ファイルの中身を記述していきます。

```html:index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div></div>
  <script text="text/javascript" src="main.js" charset="utf-8"></script>
</body>
</html>
```
できあがったら、ブラウザでindex.htmlファイルを見てみましょう。
Hello webpack と表示されていたら成功です。

続きの画像やcssをバンドルする方法は、以下のURLをご覧ください。
https://webpack.js.org/guides/asset-management/

##webpackの使い方の振り返り
① webpackのインストール
② webpackの設定ファイルを書き込む
③ webpackを実行する。
④ バンドル成功


####【参考】
[webpack で始めるイマドキのフロントエンド開発](https://qiita.com/yosisa/items/61cfd3ede598e194813b)
[最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ](https://ics.media/entry/12140/)