WHY USE WEBPACK CODE

Even with its popularly, understanding webpack can be intimidating, so I'll try to keep it simple.

To understand how Vite works, it's best to look at how webpack works first.

Dev Server: Native-ES-Modules, served via Vite using a Koa web serverĬheck out Mozilla's article on ES Modules if their new to you.

Dev Server: Bundled modules served via webpack-dev-server using Express.js web server.

Supported Modules: ES Modules, CommonJS and AMD Modules.

WHY USE WEBPACK CODE

The main functional difference you'll notice with Vite and your webpack app, is how code is served in development and which modules are supported.ĭon't worry if the below terms don't make sense to you, we'll be exploring them below. New Vue 3 project / 10 components / no Babel / 2nd run, in development. The bigger your app is the more noticeable the speed difference will be. To give you a quick idea on how much faster it is, the below comparison is for Vue CLI which uses webpack. 📜 Esbuild powered typescript / jsx (super quick).🙅‍♂️ Zero configuration for numerous pre-processors out of the box.🔥 Hot module reloading (HMR) that is basically instant, regardless of app size.⌛ Less time waiting for your app to start, regardless of app size.Vite's core functionality is similar to webpack + webpack-dev-server with some core improvements on developer experience: It's an experimental new direction in how build tools can work with a greenfield ecosystem. Vite is a web development build tool which supports Vue, React and Preact. Vite could the next best thing in tooling, currently, it's still in a pre-release stage though so be careful out there 🐛. Afterwards I'll give you some recommendations for setting up Vite for yourself. We'll be looking at how Vite no-bundling works, by first looking at how webpack's bundling works and what the difference is. I'll be comparing how Vite works to the standard webpack config using webpack-dev-server, which all major Vue frameworks are using.

The unknown was the new project by Evan You: ⚡ Vite (/veet/). In rebuilding my old Nuxt.js personal site, I wanted to challenge myself to learn the latest tech, the unknown.

Why use webpack