const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  target: 'web',
  entry: {
    entry: ['./src/index.tsx', 'whatwg-fetch', 'core-js/features/promise'],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
    alias: {
      '@src': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components/'),
      '@action': path.resolve(__dirname, 'src/action/'),
      '@constants': path.resolve(__dirname, 'src/constants/'),
      '@store': path.resolve(__dirname, 'src/store/'),
      '@slices': path.resolve(__dirname, 'src/slices/'),
    },
    fallback: {
      buffer: require.resolve('buffer/'),
    },
  },
  devServer: {
    historyApiFallback: true,
    host: '0.0.0.0',
    hot: true,
    port: 3000,
    proxy: [
      {
        context: ['/api', '/oauth2', '/login'],
        target: 'http://localhost:8080',
      },
    ],
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: `bundle.js?t=${new Date().getTime()}`,
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
          },
        },
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `bundle.css?t=${new Date().getTime()}`,
    }),
    new HtmlPlugin({
      template: './index.html',
    }),
    new CopyPlugin([
      {
        from: 'config.js',
      },
    ]),
  ],
  watchOptions: {
    ignored: /node_modules/,
  },
};