Migrate project from Webpack to Vite

[cnotv]

Description

After ditching Nuxt and upgrading to Vue3, migrate bundler to use Vite to reduce development time and improve DX. Important: Vite is the default choice for the ecosystem, while the alternative and current tool is Vue CLI which is in maintenance mode.

Official Vue CLI to Vite migration article.

Context

Explanation

Given the premises that Webpack module federation is not necessary, but we rather rely on Yarn Workspaces, the migration to Vite seems now possible.

This will require to update all the configuration, which is usually generated by the Vue3 CLI in a prompt. Build and CI pipelines will also require to be reviewed.

Complexities

A particular attention will have to go to the Webpack configuration (at the moment present in the Nuxt configuration) and the use of the NormalModuleReplacementPlugin() as it will have to be replaced by the Vite Plugin API (Thanks @catherineluse for the mention)

Storybook can also be migrated to Vite and speed up a lot development time, as explained in their article.

Tests

This would also require a migration to Vitest since it embeds Jest and wires it nicely with Vite and avoid issues with ts-jest, vue-jest2|3 and surrounding.

Conflicts

Node requirement is bound to 16 due some dependencies, as in issue on CI.

[cnotv]

Some notes from @rak-phillip about Vite integration while updating Vue to 2.7. https://github.com/rancher/dashboard/pull/8695

[cnotv]

At the current time, further Webpack implementations have been added and the description requires to be updated.