project setup done.

webpack.config.js

@@ -0,0 +1,69 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const isProduction = process.env.NODE_ENV == "production";
+
+const config = {
+	entry: "./src/index.js",
+	output: {
+		path: path.resolve(__dirname, "dist"),
+	},
+	devServer: {
+		open: true,
+		host: "localhost",
+	},
+	plugins: [
+		new MiniCssExtractPlugin(),
+		// Add your plugins here
+		// Learn more about plugins from https://webpack.js.org/configuration/plugins/
+	],
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx)$/i,
+				loader: "babel-loader",
+			},
+			{
+				test: /\.s[ac]ss$/i,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: "css-loader",
+						options: {
+							importLoaders: 2,
+							sourceMap: true,
+							url: false,
+						},
+					},
+					{
+						loader: "postcss-loader",
+						options: {
+							postcssOptions: {
+								plugins: ["autoprefixer"],
+							},
+						},
+					},
+					"sass-loader",
+				],
+			},
+			{
+				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;
+};