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

想定されるディレクトリ構成

.
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── hello.js
│           └── goodbye.js
└── webpack.config.js

package.json作成

yarn init -y

package.jsonが生成される

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

yarn add webpack webpack-cli --dev

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

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

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

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

webpack.config.js の作成

webpack.config.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')
    }
};

ビルドする

yarn run webpack

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

yarn webpack

/public/js/bundle.jsが生成される

yarn run

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

Babelをローカルインストール

yarn add babel-loader @babel/core @babel/preset-env --dev

Babel: ECMAScriptをトランスパイルしてくれる

webpack.config.js に babelを使うための設定を追加

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 }]]
                        }
                    }
                ]
            }
        ]
    }
};