some performance tweaking

Author: RahulDey12

package.json

@@ -6,11 +6,9 @@
     "prod": "webpack --mode=production"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
+    "@swc/core": "^1.2.110",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "*",
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^3.0.2",
     "mini-css-extract-plugin": "^1.6.1",
@@ -19,7 +17,8 @@
     "sass": "^1.35.1",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.0.0",
-    "webpack": "^5.40.0",
+    "swc-loader": "^0.1.15",
+    "webpack": "^5.64.1",
     "webpack-cli": "^4.7.2",
     "webpackbar": "*"
   },

webpack.config.js

@@ -1,34 +1,33 @@
 const path = require('path')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const WebpackBar = require('webpackbar');
 
 module.exports = (_env, options) => {
     const isProduction = options.mode !== 'development';
 
-    return {
-        entry: './src/js/app.js',
+    let config = {
+        entry: ['./src/js/app.js', './src/scss/app.scss'],
         output: {
             path: path.resolve(__dirname, 'dist'),
-            filename: 'js/app.js'
-        }, 
+            filename: 'js/app.js',
+            pathinfo: isProduction,
+            clean: true,
+        },
 
         module: {
             rules: [
                 {
                     test: /\.js$/,
-                    exclude: /node_modules/,
+                    include: path.resolve(__dirname, 'src'),
                     use: {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-env']
-                        }
+                        loader: 'swc-loader',
                     }
                 },
 
                 {
                     test: /\.(sa|sc|c)ss$/,
+                    include: path.resolve(__dirname, 'src'),
                     use: [
                         isProduction ? 
                         {
@@ -56,7 +55,6 @@ module.exports = (_env, options) => {
 
         plugins: [
             new WebpackBar(),
-            new CleanWebpackPlugin(),
             new MiniCssExtractPlugin({
                 filename: 'css/app.css'
             })
@@ -67,8 +65,12 @@ module.exports = (_env, options) => {
               `...`,
               new CssMinimizerPlugin(),
             ],
-          },
+          }
+    }
 
-        devtool: 'source-map'
+    if(! isProduction) {
+        config['devtool'] = 'source-map'
     }
+
+    return config;
 }