Migrate project from Webpack to Vite (Vue CLI EOM)

[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

Given the premises that Webpack module federation is not necessary (Vite alternative), 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

Webpack NormalModuleReplacementPlugin

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

Webpack require.context()

In the project often, components are loaded globally or specifically in bulk. This has been already crossed as Webpack issue migrating from 4 to 5 (used by Vue3): #11773

Webpack VirtualModulesPlugin

TBD alternatives

Webpack BundleAnalyzerPlugin

TBD alternatives

CopyWebpackPlugin

TBD alternatives

Storybook

NOTE: Vue Webpack 5 is deprecated

Storybook can also be migrated to Vite and speed up a lot of development time, as explained in their article.
It should be possible to update it independently if imported as a library.

Development time will be way faster: Storybook run and up in 18s, with Vite it will be without waiting time.

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.

[cnotv]

Some notes from @rak-phillip about Vite integration while updating Vue to 2.7.
#8695

[cnotv]

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