yarn, webpack, babel, ビルドできる環境を作る

## 想定されるディレクトリ構成
```
.
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── hello.js
│           └── goodbye.js
└── webpack.config.js
```
## package.json作成

```sh
yarn init -y
```
`package.json`が生成される

## webpack, webpack-cliをローカルインストール

```sh
yarn add webpack webpack-cli --dev
```

webpack:モジュールをバンドルしてくれる
webpack-cli:webpackコマンドを使うために必要

`--dev` すると` devDependencies ` に追記される
(単に`yarn add`した場合は、`dependencies`に追記される)

* `devDependencies`は開発時にのみ必要なモジュール
* `dependencies`は実行時にも必要なモジュール

参考：[Qiita ちゃんと使い分けてる? dependenciesいろいろ。](https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95)
参考：https://docs.npmjs.com/files/package.json#dependencies
参考：[Qiita CLI 環境構築 グローバルインストールとローカルインストールの違いについて](https://qiita.com/DeployCat/items/cd456d6bea72937464f8)

## webpack.config.js の作成
`webpack.config.js`を作成して下記のように設定

```js:webpack.config.js
// pathモジュールを読み(output.pathに絶対パスを指定するため)
const path = require('path');

module.exports = {
    // モードの設定。指定可能な値は、none, development ,production（デフォルト）
    // https://webpack.js.org/concepts/mode/#mode-development
    mode: 'development',
    // アプリケーションが実行を開始されるポイント(エントリーポイント)
    // 配列で指定すると、すべての項目が実行される
    // https://webpack.js.org/configuration/entry-context/#entry
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        // ビルド後のファイルが出力される"絶対パス"ディレクトリ
        // https://webpack.js.org/configuration/output/#outputpath
        path: path.join(__dirname, 'public/js')
    }
};
```

## ビルドする
```sh
yarn run webpack
```
`run`コマンドは省略することができるので、以下のコマンドでもOKです。
タイプ数が減って嬉しいですね。

```sh
yarn webpack
```

`/public/js/bundle.js`が生成される
#### yarn run
yarn run コマンドを使うと、ローカルインストールしたパッケージも自動的にパス(./node_modules/.bin)を通してくれる。素敵
参考：https://yarnpkg.com/lang/en/docs/cli/run/


## Babelをローカルインストール
```sh
yarn add babel-loader @babel/core @babel/preset-env --dev
```
Babel: ECMAScriptをトランスパイルしてくれる

## webpack.config.js に babelを使うための設定を追加
```js:webpack.config.js
// pathモジュールを読み(output.pathに絶対パスを指定するため)
const path = require('path');

module.exports = {
    // モードの設定。指定可能な値は、none, development ,production（デフォルト）
    // https://webpack.js.org/concepts/mode/#mode-development
    mode: 'development',
    // アプリケーションが実行を開始されるポイント(エントリーポイント)
    // 配列で指定すると、すべての項目が実行される
    // https://webpack.js.org/configuration/entry-context/#entry
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        // ビルド後のファイルが出力される"絶対パス"ディレクトリ
        // https://webpack.js.org/configuration/output/#outputpath
        path: path.join(__dirname, 'public/js')
    },
    // https://webpack.js.org/configuration/module/#rule-conditions
    module: {
        rules: [
            {
                // 一致"しなければならない"条件。(= input時に"test"される値)
                // 正規表現、正規表現の配列が指定可能(強制ではない)
                // https://webpack.js.org/configuration/module/#condition
                test: /\.js$/,
                // "一致してはいけない"条件。文字列または文字列の配列を指定可能(強制ではない)
                exclude: /node_modules/,
                use: [
                    {
                        // ローダーの指定
                        // https://webpack.js.org/configuration/module/#ruleuse
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', { modules: false }]]
                        }
                    }
                ]
            }
        ]
    }
};
```