⚙️ Vite, Webpack & Babel Explained

As your JavaScript projects grow, you'll need tools to bundle, transpile, and optimize your code. Vite, Webpack, and Babel are essential tools in modern web development.

⚡ What is Vite?

Vite is a fast build tool and development server created by Evan You (creator of Vue). It’s optimized for speed with native ES Modules and instant hot module replacement.

• Extremely fast dev server
• Zero-config support for Vue, React, etc.
• Built-in ES Module support

Install & Use Vite:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

🧱 What is Webpack?

Webpack is a powerful module bundler. It processes JavaScript, CSS, images, and more into a single bundle or optimized output — but often requires configuration.

• Bundles JS, CSS, images, etc.
• Supports plugins and loaders (like Babel)
• Can be used with React, Vue, Angular

Basic Webpack Setup:

npm install --save-dev webpack webpack-cli

Create a webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  mode: 'development'
};

🔁 What is Babel?

Babel is a JavaScript compiler that converts modern JavaScript (ES6+) into backwards-compatible JavaScript for older browsers.

• Transpiles ES6+ code to ES5
• Used with Webpack or standalone
• Required for browser compatibility

Install Babel with Webpack:

npm install --save-dev babel-loader @babel/core @babel/preset-env

Update webpack.config.js with a loader:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

🆚 Vite vs Webpack vs Babel