const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
	entry: {
		app: './ScriptsAndCss/TypeScripts/main_api.ts',
		styles: './ScriptsAndCss/CssFiles/styles.css',
	},
	output: {
		path: path.resolve(__dirname, 'wwwroot/js'),
		filename: '[name].min.js',
	},
	resolve: {
		extensions: ['.ts', '.js', '.css'],
	},
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: 'ts-loader',
				exclude: /node_modules/,
			},
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '../css/app.min.css',
		}),
	],
	mode: 'development',
	watch: true,
}

mode: 'production',
optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin()
    ]
},

const webpackConfig = require('./webpack.config.js')

module.exports = function (grunt) {
	grunt.initConfig({
		webpack: {
			options: webpackConfig,
			build: {},
		},
		browserSync: {
			dev: {
				bsFiles: {
					src: [
						'wwwroot/css/*.css',
						'wwwroot/js/app.min.js',
						'Views/**/*.cshtml',
					],
				},
				options: {
					watchTask: true,
					proxy: 'localhost:5000',
				},
			},
		},
		watch: {
			ts: {
				files: ['ScriptsAndCss/TypeScripts/**/*.ts'],
				tasks: ['webpack:build'],
			},
		},
	})

	grunt.loadNpmTasks('grunt-webpack')
	grunt.loadNpmTasks('grunt-browser-sync')
	grunt.loadNpmTasks('grunt-contrib-watch')

	grunt.registerTask('build', ['webpack:build'])
	grunt.registerTask('default', ['build', 'browserSync:dev', 'watch'])
}