手を動かして目で見た方が早い！と思い、webpackの仕組みを理解するためにwebpackの導入からローカルサーバー起動までを実際にやってみましたのでこちらを紹介します。

そもそもwebpackとは

webpackは、JSファイルをまとめるモジュールバンドラー。

メリット

• ファイルを1つにまとまることでウェブコンテンツの読み込み性能向上

• スタイルシートや画像もバンドルできる

• JSファイルの圧縮やソースマップに対応

• ローカルサーバーの起動ができる

• モジュール形式で提供されているJSライブラリを取り込める

↓　実際にやってみたこと

webpackを導入

1. 公式サイトからNode.jsをインストール

2. コマンド実行：npm init -y（プロジェクトの設定情報が記述されたpackage.jsonファイルが生成される）

3. コマンド実行：npm install -D webpack webpack-cil（webpack関連モジュールインストール）

↑ -Dオプションをつけることで開発用にインストールされる
package.jsonのdevDependenciesにwebpackが追加されていたのでインストール完了！

JSモジュールを使う

webpackを使うとJSモジュールをブラウザで扱える形に変換できます。

モジュール方式のJSファイルを用意

ex) index.jsでsub.jsに定義されたexampleメソッドを呼び出す

【index.js】
import {example} from "./sub";
hello();

【sub.js】
export function example(){
 alert ("例です");
}

ビルドしてみる

index.jsのようにメインとなる処理を行うJSファイルを「エントリーポイント」と呼び、エントリーポイントをコマンドでビルドしました。

1. コマンド実行：npx webpack

2. index.js内で必要なsub.jsが統合され、distフォルダーの中にmain.jsとして出力されたことを確認

3. webpackで出力したdistフォルダー内のmain.jsをHTMLで読み込むと、バンドルされたコードが実行された

package.jsonをカスタマイズ

npx webpackコマンドでビルドするよりもコマンドのショートカット（エイリアス）であるnpm scriptsを使うと便利なので設定しました。

1. package.jsonファイルのscriptsに"build" : "webpack"を追加

2. コマンド実行：npm run build（distにmain.jsが生成されたことを確認）

webpack.config.jsをカスタマイズ

webpack.config.jsファイルを用意することで、webpackの挙動を調整できるため設定しました（エントリーポイントを指定するentryと、出力フォルダーをカスタマイズするoutputがある）

module.exports = {
 entry: './src/index.js',
 output: {
  path: '${__dirname}/dist',
  filename: "main.js"
 }
};

webpackでコードの圧縮とソースマップを有効にする

• modeにdevelopmentを指定することでソースマップを有効にする（ソースマップは圧縮されたコードを人が目視確認しやすくするために使う）

• modeにproduntionを指定することでJSにのコードを圧縮する

今回はdevelopmentを指定しました。

module.exports = {
 entry: './src/index.js',
 output: {
  path: '${__dirname}/dist',
  filename: "main.js"
 },
 mode: "development"
};

ローカルサーバーを起動

ファイルに変更を加えた時に一々ビルドコマンドを実行するのは面倒、、
ローカルサーバーを使用すれば、ファイルの変更を検知し、自動的にビルドコマンドを実行し、ブラウザをリロードする手順を自動化できます！

1. コマンド実行：npm i -D webpack-dev-server （webpack-dev-serverモジュールをインストール）

2. scriptsにサーバーを立ち上げるためのコマンドを追加（"start" : "webpack serve"）

3. webpack.config.jsのdevServerにルートフォルダーを設定。（open : trueを指定しておくと自動的にブラウザが立ち上がる）

module.exports = {
 entry: './src/index.js',
 output: {
  path: '${__dirname}/dist',
  filename: "main.js"
 },
 mode: "development",
 devServer: {
  static: "dist",
  open: true
 }
};

これで自動的に変更がブラウザに反映されるようになりました！

基本的な設定のみですが仕組みの理解に繋がったと思うので、気になった方はぜひ実践してみてください！