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

module.exports = env => {
  const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, `src/index.html`),
    filename: "./index.html"
   });

  return{
    mode: "development",
    entry: path.join(__dirname, `src/index.ts`),
    devtool: "source-map",
    output: {
      path: __dirname + '/dist',
      filename: `index.js`,
      publicPath: ''
    },
    resolve: {
      extensions: [ '.ts', '.js' ],
      alias:{
        "@ui": path.resolve("src/ui"),
        "@types": path.resolve("types"),
        "@shared": path.resolve("src/shared"),
        "@private": path.resolve("private"),
      }
    },
    plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([
      { from: 'src/lib', to: 'lib' },
      { from: 'src/img', to: 'img' }
    ])], 
    module: {
      rules: [
        {
          test:/\.css$/,
          exclude: /node_modules/,
          loader: ['style-loader','css-loader'],
        },
        {
          test:/\.scss$/,
          exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: './',
                hmr: process.env.NODE_ENV === 'development',
              },
            },
            'css-loader','sass-loader'
          ]
        },{
          test:/(\.jpg|\.png|\.gif|\.svg)$/,
          exclude: /node_modules/,
          use:[{
            loader: 'file-loader',
            options: {
              name:'img/[name].[ext]'
            },
          }]
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: 'ts-loader'
        }
      ]
    },
     devServer: {
       port: 3003
     }
  };
}