webpack.config.jsファイルの設定方法

プロジェクトのルートディレクトリにwebpack.config.jsファイルを作成します。このファイルは、webpackの設定オプションを記述するためのものです。
基本的なwebpackの設定を行うために、以下のコードをwebpack.config.jsファイルに追加します:

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

上記の設定では、entryオプションでエントリーポイントのファイルを指定し、outputオプションで出力先のディレクトリとファイル名を指定しています。この例では、./src/index.jsをエントリーポイントとし、バンドルされたファイルを./dist/bundle.jsに出力します。

さらに高度な設定を行いたい場合は、以下のようなコードをwebpack.config.jsファイルに追加します:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: 'file-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

上記の例では、moduleオプションでローダーの設定を行っています。babel-loaderはJavaScriptファイルをトランスパイルするために使用され、style-loaderとcss-loaderはCSSファイルをバンドルするために使用されます。また、file-loaderは画像ファイルなどのアセットをバンドルするために使用されます。

webpack.config.jsファイルの設定が完了したら、ターミナルでwebpackコマンドを実行してビルドを行います。ビルドが成功すると、指定した出力先にバンドルされたファイルが生成されます。

この記事では、webpack.config.jsファイルの基本的な設定と一般的なオプションの例を紹介しました。webpackの設定はプロジェクトの要件に応じてカスタマイズできますので、さまざまな方法を試してみてください。