Modules Bundlers – Webpack, Rollup, Vite

While native <script type="module"> works, bundlers give you:

• Transpilation (Babel) to older browsers.
• Tree‑shaking – remove dead code.
• Asset handling (CSS, images, fonts).

Basic Vite config (ESM)

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

index.html

<script type="module" src="/main.js"></script>

main.js

import { greet } from './greet.js';
greet();