diff --git a/webpack.mix.js b/webpack.mix.js
index 8d78b82c8..aadcac397 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,8 +1,10 @@
 let mix = require('laravel-mix');
 const fs = require("fs");
+const path = require("path");
 
 mix.before(() => {
-	fs.rmSync('public/js', { recursive: true, force: true });
+    fs.rmSync('public/css', { recursive: true, force: true });
+    fs.rmSync('public/js', { recursive: true, force: true });
 });
 
 
@@ -46,31 +48,35 @@ mix.version();
 const TerserPlugin = require('terser-webpack-plugin');
 
 mix.options({
-	processCssUrls: false,
-	terser: {
-		parallel: true,
-		terserOptions: {
-			compress: true,
-			output: {
-				comments: false
-			}
-		}
-	}
+    processCssUrls: false,
+    terser: {
+        parallel: true,
+        terserOptions: {
+            compress: true,
+            output: {
+                comments: false
+            }
+        }
+    }
 })
+mix.alias({
+    '@': path.join(__dirname, 'resources/assets/components'),
+    '~': path.join(__dirname, 'resources/assets/js/components'),
+});
 mix.webpackConfig({
-	optimization: {
-		providedExports: false,
-		sideEffects: false,
-		usedExports: false,
-		minimize: true,
-		minimizer: [ new TerserPlugin({
-			extractComments: false,
-		})]
-	},
-	output: {
-		chunkFilename: 'js/[name].[chunkhash].js',
-	}
+    optimization: {
+        providedExports: false,
+        sideEffects: false,
+        usedExports: false,
+        minimize: true,
+        minimizer: [ new TerserPlugin({
+            extractComments: false,
+        })]
+    },
+    output: {
+        chunkFilename: 'js/[name].[chunkhash].js',
+    }
 });
 mix.autoload({
-	jquery: ['$', 'jQuery', 'window.jQuery']
+    jquery: ['$', 'jQuery', 'window.jQuery']
 });