Hi @Abhishekty ,
One approach I could suggest is to create a new AEM project in your local using Vite and then understand what deliverables are to be produced and also the source code.
You can figure out the differences between webpack and vite.
One sample vite config file would look something like below:
import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig(({ mode }) => ({
plugins: [eslintPlugin({ failOnError: true })],
build: {
rollupOptions: {
input: mode === 'development' ? 'src/main/webpack/static/index.html' : 'src/main/webpack/site/main.ts',
output: {
entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: '[name].[ext]',
},
},
sourcemap: 'inline',
minify: true,
cssMinify: true,
outDir: 'dist/clientlib-site',
assetsDir: '',
cssCodeSplit: false,
},
publicDir: 'src/main/webpack/resources',
server: {
proxy: {
'/content': {
target: 'http://localhost:4502',
changeOrigin: true,
secure: false,
},
'/etc.clientlibs': {
target: 'http://localhost:4502',
changeOrigin: true,
secure: false,
},
},
open: 'src/main/webpack/static/',
},
}));
Further you can remove webpack config:
@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread
css-loader
css-minimizer-webpack-plugin
cssnano
eslint-webpack-plugin
glob-import-loader
html-webpack-plugin
mini-css-extract-plugin
postcss
postcss-loader
sass-loader
source-map-loader
style-loader
terser-webpack-plugin
ts-loader
tsconfig-paths-webpack-plugin
webpack
webpack-cli
webpack-dev-server
webpack-merge
Thanks
Tarun