Как настроить Webpack для React приложения?react-61

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install react react-dom
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Точка входа
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true, // Очищаем папку dist перед каждой сборкой
  },
  resolve: {
    extensions: ['.js', '.jsx'], // Расширения файлов для резолва
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // Используем babel для JS/JSX
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // Обработка CSS
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // Обработка изображений
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // Шаблон HTML
      filename: 'index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 3000,
    open: true, // Автоматически открывать браузер
    hot: true, // Включить Hot Module Replacement
  },
};

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

npm install sass-loader sass css-loader style-loader --save-dev

{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
}

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ... остальная конфигурация
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(), // Минификация JS
      new CssMinimizerPlugin(), // Минификация CSS
    ],
    splitChunks: {
      chunks: 'all', // Разделение vendor кода
    },
  },
};

npm install dotenv-webpack --save-dev

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv()
  ]
}

npm install typescript ts-loader @types/react @types/react-dom --save-dev

{
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/,
}

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
}

npm install webpack-bundle-analyzer clean-webpack-plugin --save-dev

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ]
}