Migrate project to Vite for asset bundling

.config/vite.config.js

@@ -0,0 +1,55 @@
+import { resolve } from "path";
+import vue from "@vitejs/plugin-vue";
+import del from "rollup-plugin-delete";
+import ESLintPlugin from '@modyqyw/vite-plugin-eslint';
+import StylelintPlugin from 'vite-plugin-stylelint';
+
+export default {
+  plugins: [
+    vue(),
+    ESLintPlugin({
+      overrideConfigFile: resolve(__dirname, "./.eslintrc.js"),
+      include: "../src/**/*.{js,vue}",
+    }),
+    StylelintPlugin({
+      files: '../src/**/*.{vue,css,sass,scss}',
+      configFile: resolve(__dirname, './.stylelintrc.js')
+    })
+  ],
+  clearScreen: false,
+  css: {
+    postcss: resolve(__dirname, "../.config/postcss.config.js"),
+  },
+  resolve: {
+    extensions: ["*", ".js", ".vue", ".json"],
+    alias: {
+      vue: "vue/dist/vue.esm-bundler.js",
+      "@": resolve(__dirname, "../src/"),
+      "@shopify-directory": resolve(__dirname, "../shopify/"),
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        bundle: resolve(__dirname, "../src/main.js"),
+      },
+      output: {
+        entryFileNames: `[name].js`,
+        chunkFileNames: `[name].js`,
+        assetFileNames: (assetInfo) =>
+          assetInfo.name.split("/").pop().split(".").shift() == "main"
+            ? "bundle.css"
+            : "[name].[ext]",
+      },
+      plugins: [
+        process.env.NODE_ENV == "production" &&
+          del({
+            targets: ["../shopify/assets/**/*", "!../shopify/assets/*static*"],
+          }),
+      ],
+    },
+    outDir: resolve(__dirname, "../shopify/assets"),
+    assetsDir: ".",
+    emptyOutDir: false,
+  },
+};

package.json

@@ -5,11 +5,11 @@
   "version": "4.4.1",
   "license": "MIT",
   "scripts": {
-    "start": "run-p -sr shopify:serve webpack:watch",
-    "deploy": "run-s webpack:build && cd shopify && shopify theme push",
-    "deploy:new": "run-s webpack:build && cd shopify && shopify theme push --unpublished",
-    "webpack:watch": "cross-env NODE_ENV=development BROWSERSLIST_ENV=development BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.dev.js --watch --progress",
-    "webpack:build": "cross-env NODE_ENV=production BROWSERSLIST_ENV=production BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.prod.js --progress",
+    "start": "run-p -sr shopify:serve vite:watch",
+    "deploy": "run-s vite:build && cd shopify && shopify theme push",
+    "deploy:new": "run-s vite:build && cd shopify && shopify theme push --unpublished",
+    "vite:watch": "cross-env NODE_ENV=development vite build --watch --mode 'development' --config .config/vite.config.js",
+    "vite:build": "cross-env NODE_ENV=production vite build --mode 'production' --config .config/vite.config.js",
     "shopify:serve": "cd shopify && shopify theme serve",
     "shopify:pull": "cd shopify && shopify theme pull",
     "lint": "run-s -c lint:*",
@@ -22,37 +22,25 @@
     "fix:shopify": "cd shopify && shopify theme check -a"
   },
   "dependencies": {
-    "tailwindcss": "^3.0.2",
-    "vue": "^3.2.26",
+    "tailwindcss": "^3.1.6",
+    "vue": "^3.2.37",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.16.4",
-    "@vue/compiler-sfc": "^3.2.26",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^8.2.3",
-    "clean-webpack-plugin": "^4.0.0",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "vite": "^3.0.0",
+    "@modyqyw/vite-plugin-eslint": "^2.0.3",
+    "rollup-plugin-delete": "^2.0.0",
+    "autoprefixer": "^10.4.7",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "eslint": "^8.4.1",
-    "eslint-plugin-vue": "^8.2.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "mini-css-extract-plugin": "^2.4.5",
+    "eslint": "^8.20.0",
+    "eslint-plugin-vue": "^9.2.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
-    "postcss-html": "^1.3.0",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.2.1",
-    "stylelint": "^14.1.0",
-    "stylelint-config-recommended": "^6.0.0",
-    "stylelint-webpack-plugin": "^3.1.0",
-    "url-loader": "^4.1.1",
-    "vue-loader": "^16.8.3",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-merge": "^5.8.0"
+    "postcss": "^8.4.14",
+    "postcss-html": "^1.5.0",
+    "postcss-import": "^14.1.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "vite-plugin-stylelint": "^3.0.2"
   }
 }