Replace webpack with Vite

package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "description": "Minimal project to generate a simple website.",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --progress",
-    "watch": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
-    "prod": "cross-env NODE_ENV=production node_modules/.bin/webpack --mode=production --progress"
+    "preview": "php -S 0.0.0.0:8080 -t public",
+    "build": "vite build --watch"
   },
   "repository": {
     "type": "git",
@@ -23,41 +23,43 @@
   },
   "homepage": "https://github.com/dotkernel/light#readme",
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
     "autoprefixer": "^10.4.20",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^9.1.3",
     "babel-preset-env": "^1.7.0",
     "bootstrap": "^5.3.3",
     "bootstrap-fileinput": "^5.5.4",
     "bootstrap-sass": "^3.4.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
-    "imports-loader": "^5.0.0",
     "jquery": "^3.7.1",
     "jquery-mousewheel": "^3.1.13",
     "mini-css-extract-plugin": "^2.9.1",
     "postcss-loader": "^8.1.1",
     "pre-commit": "^1.2.2",
-    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.86.3",
     "sass-loader": "^16.0.1",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "tippy.js": "^6.3.7",
     "toastr": "^2.1.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.4",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4"
+    "vite": "^6.3.1",
+    "vite-plugin-static-copy": "^2.3.1"
   },
   "dependencies": {
+    "@babel/core": "^7.26.9",
     "@popperjs/core": "^2.11.8",
     "bootstrap-slider": "^11.0.2",
+    "lightningcss": "^1.29.3",
     "npm": "^10.8.3",
-    "pdfjs-dist": "^4.6.82",
-    "pdfobject": "^2.3.0",
-    "sass": "^1.77.8"
+    "npm-check": "^6.0.1",
+    "popper.js": "^1.16.1",
+    "vite-jsconfig-paths": "^2.0.1",
+    "vite-plugin-bundle-css": "^0.1.1",
+    "vite-plugin-commonjs": "^0.10.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-minify": "^2.1.0"
   }
 }

src/App/assets/js/components/_main.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
+
 $(document).ready(function () {
-    $('[data-toggle="tooltip"]').tooltip();
 });

src/App/assets/js/index.js

@@ -1,11 +1,8 @@
 // Load jQuery and Bootstrap
-try {
-    window.$ = window.jQuery = require('jquery');
-    require('bootstrap');
-    require('bootstrap-fileinput');
-    require('bootstrap-slider');
-    require('jquery-mousewheel');
+// Import our custom CSS
+import '../scss/index.scss'
+import './components/_main'
+import 'bootstrap/dist/js/bootstrap.bundle';
+window.$ = window.jQuery = require('jquery');
 
-    window.toastr = require('toastr');
-} catch (e) {
-}
+// Import all of Bootstrap's JS

src/App/assets/scss/index.scss

@@ -1,11 +1,10 @@
 // Bootstrap
 $navbar-height: 60px;
 $grid-float-breakpoint: 767px;
-$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-@import "~bootstrap/scss/bootstrap";
-@import "~toastr/toastr";
-@import "~bootstrap-slider/src/sass/bootstrap-slider";
-
+$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+@import "../../../../node_modules/toastr/toastr";
+@import "../../../../node_modules/bootstrap-slider/src/sass/bootstrap-slider";
 // Base
 @import "components/general";
 @import "components/pages";

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@*": ["./src/*"]
+    }
+  },
+  "installConfig": {
+    "hoistingLimits": "none"
+  }
+}

vite.config.js

@@ -0,0 +1,51 @@
+import {defineConfig} from 'vite';
+import { ViteMinifyPlugin } from 'vite-plugin-minify'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+import alias from '@rollup/plugin-alias'
+import path from 'path'
+import commonjs from "vite-plugin-commonjs";
+export default defineConfig({
+    plugins: [
+        alias(), commonjs(),
+        viteStaticCopy({
+            targets: [
+                {
+                    src: 'App/assets/fonts/*',
+                    dest: 'fonts'
+                },
+                {
+                    src: 'App/assets/images/*',
+                    dest: 'images/app/'
+                },
+            ],
+        }),
+        ViteMinifyPlugin({}),
+    ],
+    emptyOutDir: true,
+    root: path.resolve(__dirname, 'src'), //'src', // Set the root directory for Vite
+    build: {
+        commonjsOptions: { transformMixedEsModules: true }, // Change
+        outDir: '../public', // Output directory for compiled assets
+        rollupOptions: {
+            input: {
+                main: '/App/assets/js/index.js', // Main JavaScript entry point
+                style: '/App/assets/scss/index.scss', // Main CSS entry point
+            },
+            output: {
+                manualChunks: undefined,
+                entryFileNames: "js/app.js",
+                assetFileNames: "css/app.css",
+            },
+        },
+    },
+    optimizeDeps: { force: true, },
+    resolve: {
+        alias: [
+            {
+                // this is required for the SCSS modules
+                find: /^~(.*)$/,
+                replacement: '$1',
+            }
+        ],
+    },
+});