📦

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  devServer: {
    static: './dist',
    port: 3000,
    hot: true,
    open: true
  }
};

// npm install babel-loader @babel/core @babel/preset-env

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

// npm install ts-loader typescript

module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }
  ]
},
resolve: {
  extensions: ['.tsx', '.ts', '.js']
}

// npm install style-loader css-loader sass-loader sass

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.module\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: { modules: true }
        }
      ]
    }
  ]
}

module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource'
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource'
    },
    {
      test: /\.svg$/,
      type: 'asset/inline'
    }
  ]
}

// npm install html-webpack-plugin

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

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
  })
]

// npm install mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }
  ]
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  })
]

const webpack = require('webpack');

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

// npm install copy-webpack-plugin

const CopyPlugin = require('copy-webpack-plugin');

plugins: [
  new CopyPlugin({
    patterns: [
      { from: 'public', to: '.' }
    ]
  })
]

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      common: {
        minChunks: 2,
        priority: -10,
        reuseExistingChunk: true
      }
    }
  },
  runtimeChunk: 'single'
}

// Lazy loading with dynamic import
const loadModule = async () => {
  const module = await import(/* webpackChunkName: "my-chunk" */ './module');
  return module.default;
};

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

// npm install terser-webpack-plugin css-minimizer-webpack-plugin

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

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: { drop_console: true }
      }
    }),
    new CssMinimizerPlugin()
  ]
}

devServer: {
  static: {
    directory: path.join(__dirname, 'public')
  },
  port: 3000,
  hot: true,
  open: true,
  compress: true,
  historyApiFallback: true,
  
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
  },
  
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
}

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components'),
    '@utils': path.resolve(__dirname, 'src/utils'),
    '@styles': path.resolve(__dirname, 'src/styles')
  },
  modules: ['node_modules', path.resolve(__dirname, 'src')]
}