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

module.exports = {
	context: path.join(__dirname, "src"),
	resolve: {
		extensions: [".js", ".ts", ".tsx"]
	},
	entry: ["./index.tsx"],
	output: {
		path: path.join(__dirname, "dist"),
		filename: "bundle.js"
	},
	devtool: "source-map",
	devServer: {
		contentBase: "./dist", // Content base
		inline: true, // Enable watch and live reload
		host: "localhost",
		port: 8080,
		stats: "errors-only"
	},
	module: {
		rules: [
			{
				test: /\.(ts|tsx)$/,
				exclude: /node_modules/,
				loader: "ts-loader"
			},
			{
				test: /\.s[ac]ss$/i,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				loader: "file-loader",
				options: {
					name: "assets/img/[name].[ext]?[hash]"
				}
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "index.html",
			hash: true
		}),
		new MiniCssExtractPlugin()
	]
};