// Generated using webpack-cli https://github.com/webpack/webpack-cli
process.traceDeprecation = true;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const isProduction = process.env.NODE_ENV //== 'production';

const config = {
	target: 'web',
	entry: './src/index.js',
	devtool: 'source-map',
	output: {
		path: path.resolve(__dirname, 'dist'),
	},
	devServer: {
		static: {
			directory: path.join(__dirname, './dist'),
		},
		compress: true,
		historyApiFallback: true,
		// open: true,
		// host: 'localhost',
		port: 8080,
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			// 	filename: './index.html',
			minify: {
				collapseWhitespace: false,
			}
		}),

		new MiniCssExtractPlugin({
			filename: '[name].css',
			// chunkFilename: '[id].css',
		}),

		new ESLintPlugin({
			files: path.resolve(__dirname, './src/js'),
		}),
		// Add your plugins here
		// Learn more about plugins from https://webpack.js.org/configuration/plugins/
	],
	optimization: {
		minimizer: [
			new CssMinimizerPlugin(),
		],
	},
	module: {
		rules: [
			{
				test: /\.js$/i,
				exclude: /node_modules/,
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: 'html-loader',
					},
				]
			},

			{
				test: /\.css$/i,
				exclude: /node_modules/,
				sideEffects: true,
				use: [MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					{
						loader: "source-map-loader",
						options: {}
					}
					// {
					// 	options: {
					// 		modules: true,
					// 	}
					// },
				],


			},
			{
				test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
				type: 'asset',
			},

			// Add your rules for custom modules here
			// Learn more about loaders from https://webpack.js.org/loaders/
		],

	},
};

module.exports = () => {
	if (isProduction) {
		config.mode = 'production';
	} else {
		config.mode = 'development';
	}
	return config;
};