Vite: King of Javascript Bundlers
You've likely gone through the years of using Webpack, Parcel, Snowpack, RollUp, Babel, and how many others? They are all great in their own way and allowed us to to do things like never before with JavaScript. But a new day has dawned my friend! Vite now stands as the king of the hill! Vite will scaffold an applications with a bare-bones setup to start your new project lean. During development you run the Dev Server ( It's worth noting that Vite has replaced Laravel Mix (Previously Webpack) for bundling Laravel's assets. Laravel is the #1 Framework in PHP for many years in a row now. Hopefully you are using VSCode. If you aren't, why not? You can also add the Vite VSCode Extension. Search for Vite is so easy to use that it requires zero configuration. Simply run one command and select 3 options as to what you want to build. They still give you the option to create a vite.config.js, but it's not required and nowhere near as complex as Webpack. Once you create your project it tells you what to do. Go into your new project folder, run Similar to other JavaScript bundlers they all have one entry point. The default entry point is at the moment is: If you've never developed with a tool that uses one main file for everything you may be surprised. For example, in the MVC Design Pattern you always have a FrontController that is used to access and route everything. Your Another simpler example would be like your CSS files. You may have a Happy Coding!Developers Speed Dream
yarn dev) which has the quickest HMR (Hot Module Replacement) I've seen. The moment you create a project your'll notice Yarn and NPM are dreadfully slow. During development the instant response to changes leaves nothing to be desired. The server startup time is about 3 seconds.VSCode Extension
vite in the extensions and you never have to leave VSCode to run your server and watch your changes.
Start using Vite
# For Yarn Users
yarn create vite
# For NPM Users
npm create vite@latest
yarn and yarn dev. Now you are ready to start developing in record time!Easy to Understand
main.js. You can change this name if you like, be sure to change the reference in index.html also.main.js is a bit like that, depending on the application you are building out of course._vars.scss, _elements.scss, and so forth. But it all comes together when you @import ... into your styles.scss (Or main stylesheet). It all comes together!