はじめに
webpackビギナーです。
タイトルの通り、なんとなくwebpackを使っていたのでなんとなくを卒業すべくまとめてみました。
今回は基本動作を確認し概念を理解します。
具体的なwebpackのファイルの設定方法はまたの機会にしようと思います。
webpackってなんだ
- JavaScriptのモジュールバンドラー。
- 通常Babelと一緒に使われる。
- 複数のファイルを一つまたは少数のファイルにバンドルしてくれる（束ねてまとめてくれる）。
- ちなみに画像ファイルとかも一緒にバンドルしてくれる。
webpackを使うメリット
- ファイルをバンドルするので、リクエストの回数を減らすことができる（画面表示が早くなる）。
- ファイル同士の依存関係を解決してくれる。
【本題】webpackの動作を確認する
- ちなみに現在のディレクトリ構造は以下の通り。
ディレクトリ構造
.
└── src
├── index.html
└── index.js
①webpackが使える環境を整える
- 下記のコマンドでwebpackとwebpack-cliをインストールする（両者必須）。
コマンド
yarn add webpack webpack-cli
- この時、node_modules、package.json、yarn.lockが作成される。
- node_modules：パッケージの依存関係が入っている場所。yarn.lockを参照して作られる。
- package.json：パッケージ（機能の塊）がバージョンと共にJSON形式で並んでいるファイル。
- yarn.lock：ここに記述したバージョンをロック（固定）することができる。
②webpackを実行してみる
- JavaScriptのファイルに、例えば以下のような簡単な関数を記述する。
index.js
function sayHello(name){
console.log("Hello!" + " " + name);
}
sayHello("Risa");
- そしてwebpackを下記のコマンドで実行（ビルド）する。
- 今回は開発環境用に出力するため
--mode developmentというオプションをつけて実行してみる。
コマンド
yarn run webpack --mode development
- すると下記画像のようにdistフォルダが作られ、その中にバンドルされたファイル（main.js）が格納される。
- dist：distribution（配布）の略。
-
開発用はファイルが圧縮されないので記述多め。デバッグしやすい。
- 次に
--mode productionオプションをつけたコマンドを実行し、本番環境用のファイルを出力してみる。 - ちなみにオプションをつけない場合はデフォルトで本番環境用になる。
コマンド
yarn run webpack --mode production
- 下記のように本番環境用は不要な記述を削除して圧縮されていることがわかる。
- webpackすごい！
まとめ
- 今回は1つのJavaScriptファイルしかバンドルしていないけれど、通常は膨大なファイルをバンドルするので便利。
- バンドルする際にファイル同士の依存関係も解決してくれている。開発者は依存関係を考える必要なし（神）。
おわりに
今回はwebpackの動作確認をしたに過ぎないので、具体的にconfigファイルの設定方法を学びたい所存。
変なところがあったら教えてくださいませ〜〜