Edited at

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作成

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