const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const Visualizer = require('webpack-visualizer-plugin');
const path = require("path");
const fs = require("fs");
const config = require("./config.json");
const url = require("url");

module.exports = {
   devServer: {
      host: "0.0.0.0", // Defaults to `localhost`
      open: false, // Open the page in browser,
      contentBase: path.join(__dirname, 'dist'),
      disableHostCheck: true,
      headers: {
         "Access-Control-Allow-Origin": "*"
      },
      watchOptions: {
         aggregateTimeout: 300,
         poll: 500
      },
      public: url.parse(config.callback_url).hostname
   },
   plugins: [
      new CopyWebpackPlugin([{
         from: "public"
      }]),
      new HtmlWebpackPlugin({
         title: 'SecureNotes',
         template: "./src/index.html"
      }),
      new MiniCssExtractPlugin({
         filename: "[name].css",
         chunkFilename: "[id].css"
      }),
      new BundleAnalyzerPlugin({
         analyzerMode: "static",
         openAnalyzer: false
      }),
      new Visualizer(),
   ],
   entry: {
      main: "./src/index.tsx"
   },
   // Enable sourcemaps for debugging webpack's output.
   devtool: "eval",
   resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".mjs"]
   },
   module: {
      rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
         }, {
            test: /\.(png|jpg)$/,
            loader: "file-loader",
         }, {
            test: /\.(scss|css)$/,
            use: [
               "style-loader", // creates style nodes from JS strings
               MiniCssExtractPlugin.loader,
               "css-loader", // translates CSS into CommonJS
               "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
         },
         {
            test: /\.svg$/,
            use: ['preact-svg-loader'],
         }
      ]
   }
};