latest config for webpack to compile js and scss

webpack.config.js

const miniCss = require("mini-css-extract-plugin");
const browserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
	mode: "production",
	entry: {
		main: ["./assets/js/script.js", "./assets/scss/styles.scss"],
	},
	output: {
		path: __dirname + "/dist/",
		filename: "js/[name].min.js",
	},
	watch: true,
	module: {
		rules: [
			{
				test: /\.(s*)css$/,
				use: [
					{
						loader: miniCss.loader,
						options: {
							publicPath: "../",
						},
					},
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
				type: "asset/resource",
				generator: {
					filename: "fonts/[name][ext]",
				},
			},
			{
				test: /\.(png|jpe?g|gif)$/,
				type: "asset/resource",
				generator: {
					filename: "images/[name][ext]",
				},
			},
		],
	},
	plugins: [
		new miniCss({
			filename: "css/[name].min.css",
		}),
		new browserSyncPlugin({
			host: "localhost",
			port: 3000,
			files: ["*.html"], // => files to watch
			server: {
				baseDir: [__dirname],
			},
			// proxy: "http://uat-intranet.combank.net/",
		}),
	],
};