/** @format */

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//env.production

module.exports = (env) => {
	console.log('TYPE: ', env?.production ? 'production' : 'development');
	return {
		entry: path.join(__dirname, 'src', 'index.js'),
		mode: 'development',
		output: {
			path: env?.production
				? path.resolve(__dirname, 'prod')
				: path.resolve(__dirname, 'dist'),
		},
		// devServer: {
		// 	port: 80,
		// },
		module: {
			rules: [
				{
					test: /\.(jsx|js)$/,
					use: {
						loader: 'babel-loader',
						options: {
							presets: [['@babel/env', { loose: true }], '@babel/preset-react'],
						},
					},
				},
				{
					test: /\.css$/i,
					use: ['style-loader', 'css-loader', 'postcss-loader'],
				},
				{
					test: /\.(png|jp(e*)g|svg|gif)$/,
					use: ['file-loader'],
				},
				{
					test: /\.svg$/,
					use: ['@svgr/webpack'],
				},
				{
					test: /\.(mp3|wav)$/i,
					loader: 'file-loader',
				},
			],
		},
		resolve: {
			extensions: ['.js', '.jsx', '.json'],
		},
		plugins: [
			new HtmlWebpackPlugin({
				template: path.join(__dirname, 'src', 'index.html'),
			}),
		],
	};
};