webpack-bundler

Webpack バンドラー

JavaScript アプリケーション向けの強力なモジュールバンドラーである Webpack のエキスパートです。Webpack の設定や関連コードを扱う際は、次のガイドラインに従ってください。

基本原則

• Webpack は、エントリーポイントから依存関係グラフを構築する静的モジュールバンドラーです
• バンドルサイズ、ビルドのパフォーマンス、開発者エクスペリエンスの最適化を重視してください
• ベストプラクティスとパフォーマンスのため、Webpack 5 以降の機能を使用してください
• プラグインとローダーのエコシステムを理解してください

プロジェクト構成

project/
├── src/
│   ├── index.js          # Main entry point
│   ├── components/       # UI components
│   ├── utils/            # Utility functions
│   ├── styles/           # CSS/SCSS files
│   └── assets/           # Images, fonts, etc.
├── dist/                 # Build output (gitignored)
├── webpack.config.js     # Main configuration
├── webpack.dev.js        # Development config
├── webpack.prod.js       # Production config
└── package.json

設定のベストプラクティス

エントリーと出力

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true
  }
};

モード設定

module.exports = {
  mode: 'production', // or 'development'
  // production mode enables tree-shaking, minification, and optimizations
};

コード分割

動的インポート

// Use dynamic imports for on-demand loading
const module = await import('./heavy-module.js');

// With React
const LazyComponent = React.lazy(() => import('./LazyComponent'));

SplitChunks の設定

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

ツリーシェイキング

ツリーシェイキングを有効にする

1. ES6 モジュール構文（import/export）を使用します
2. mode: 'production' を設定します
3. package.json で sideEffects を設定します

{
  "sideEffects": false
}

または、副作用のあるファイルを指定します。

{
  "sideEffects": ["*.css", "*.scss"]
}

ツリーシェイキングのための Babel 設定

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

ローダー

一般的なローダー設定

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    },
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: 'ts-loader'
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource'
    }
  ]
}

プラグイン

重要なプラグイン

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  }),
  // Use for bundle analysis
  new BundleAnalyzerPlugin()
]

パフォーマンスの最適化

バンドルサイズの最適化

• webpack-bundle-analyzer を使用して、サイズの大きな依存関係を特定します
• ツリーシェイキングを有効にして、未使用のコードを削除します
• サイズの大きな依存関係を、より小さな代替ライブラリに置き換えます
• Gzip または Brotli 圧縮を有効にします

ビルドのパフォーマンス

module.exports = {
  cache: {
    type: 'filesystem'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

本番環境での最適化

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true
    }),
    new CssMinimizerPlugin()
  ],
  moduleIds: 'deterministic',
  runtimeChunk: 'single'
}

開発サーバー

devServer: {
  static: './dist',
  hot: true,
  port: 3000,
  historyApiFallback: true,
  proxy: {
    '/api': 'http://localhost:8080'
  }
}

環境変数

const webpack = require('webpack');

plugins: [
  new webpack.DefinePlugin({
    'process.env.API_URL': JSON.stringify(process.env.API_URL)
  })
]

避けるべき一般的なアンチパターン

• すべてを単一のファイルにバンドルしないでください
• 必要な関数が一部だけの場合は、ライブラリ全体のインポートを避けてください
• 開発時にソースマップを省略しないでください
• 環境固有の値をハードコードしないでください
• バンドルサイズの警告を無視しないでください

テストとデバッグ

• デバッグにはソースマップを使用します（devtool: 'source-map'）
• webpack-bundle-analyzer で定期的にバンドルを分析します
• デプロイ前に、本番ビルドをローカルでテストします
• stats オプションを使用して、ビルドの出力内容を把握します

セキュリティに関する考慮事項

• Webpack とプラグインを最新の状態に保ちます
• すべてのユーザー入力を検証し、サニタイズします
• Content Security Policy ヘッダーを使用します
• バンドル内で機密データを公開しないようにします

CI/CD との統合

• node_modules と Webpack のキャッシュをキャッシュします
• --mode production を指定して本番ビルドを実行します
• バンドルサイズの予算に違反した場合は、ビルドを失敗させます
• バンドル分析レポートを生成して保存します