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

module.exports = {
  entry: ['./src/index.js'],
  mode: "production",
  target: "web",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"],
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve("src", "index.html")
  }), new MiniCssExtractPlugin(),
  new CopyPlugin({
    patterns: [
      { from: "src/assets", to: "assets" }
    ],
  })],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].d3v4pp.bundle.js',
    publicPath: "/"
  },
  devServer: {
    client: {
      progress: true,
      reconnect: true,
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    hot: true,
    historyApiFallback: true,
    open: true,
    static: {
      directory: path.join(__dirname, 'src'),
    },
    compress: true,
    port: 9000,
   
  }
};