Webpack

はじめに

Webpackとは

Webpackは、モダンなJavaScriptアプリケーションのための静的モジュールバンドラーです。Webpackの主な目的は、プロジェクトの依存関係を効率的にまとめ、最適化することです。

インストールと基本セットアップ

インストール方法

Node.jsプロジェクトでWebpackをインストールするには、以下のコマンドを使用します：

npm install webpack webpack-cli --save-dev

基本設定ファイル

プロジェクトのルートディレクトリに webpack.config.js を作成します：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

主要な概念

エントリーポイント

エントリーポイントは、Webpackがビルドプロセスを開始するファイルを示します。デフォルトは ./src/index.js です。

ローダー

ローダーにより、Webpackは JavaScript以外のファイルタイプを処理できます。代表的な例：

• css-loader: CSSファイルの処理
• babel-loader: JavaScriptの最新構文を古いブラウザで動作するコードに変換
• file-loader: 画像やフォントファイルの処理

設定例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

プラグイン

プラグインはWebpackの機能を拡張します：

• HtmlWebpackPlugin: HTMLファイルの自動生成
• MiniCssExtractPlugin: CSSファイルの別出力
• CleanWebpackPlugin: ビルド前に出力ディレクトリをクリーン

最適化

コード分割

動的インポートを使用してコード分割：

// 動的インポート
import('./module').then(module => {
  // モジュール使用
});

本番環境の最適化

本番ビルド用の設定：

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    }
  }
};

開発サーバー

webpack-dev-server

ホットリロード機能付きの開発サーバーをセットアップ：

npm install webpack-dev-server --save-dev

package.jsonスクリプト：

{
  "scripts": {
    "start": "webpack serve --open"
  }
}

トラブルシューティング

一般的な問題と解決策

• 依存関係の解決: npm install で不足しているパッケージを確認
• ローダーの設定ミス: コンソールエラーを注意深く確認
• パフォーマンス: webpack-bundle-analyzer でバンドルサイズを分析

結論

Webpackは複雑に見えますが、段階的に学ぶことで強力なビルドツールを習得できます。継続的に公式ドキュメントを参照し、実践することをおすすめします。