ReactとWebpackの設定例 - シンプルで簡単な方法

2024-02-09 08:40 React Webpack ビルド
  1. プロジェクトのセットアップ まず、新しいReactプロジェクトを作成します。ターミナルで以下のコマンドを実行します。
npx create-react-app my-app
cd my-app
  1. Webpackのインストール Reactプロジェクトのルートディレクトリで、Webpackをインストールします。
npm install webpack webpack-cli --save-dev
  1. Webpackの設定ファイルの作成 ルートディレクトリに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|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

上記の設定では、src/index.jsをエントリーポイントとし、dist/bundle.jsにバンドルされたファイルを出力します。また、Babelを使用してES6以上のJavaScriptをトランスパイルします。

  1. Babelの設定 ルートディレクトリに.babelrcという名前のファイルを作成し、以下の内容を追加します。
{
  "presets": ["@babel/preset-react"]
}

これにより、ReactのJSX構文をトランスパイルできるようになります。

  1. ビルドの実行 ターミナルで以下のコマンドを実行して、Webpackによるビルドを行います。
npx webpack

ビルドが成功すると、dist/bundle.jsが生成されます。

以上がReactとWebpackのシンプルな設定例です。この設定を使用することで、Reactプロジェクトのビルドプロセスが簡略化され、効率的な開発が可能になります。

この記事ではさらに多くのコード例や詳細な設定については触れていませんが、基本的な設定例としては十分です。詳細な設定が必要な場合は、公式ドキュメントや他のリソースを参考にすることをおすすめします。