Build Tools: Vite, Webpack & Bundlers
Build tools transform your code for production - bundle modules, minify code, compile modern syntax for older browsers, and optimize assets. Vite is the modern standard, while Webpack powers many existing projects.
Build Tools
- Why bundle? - Browsers can't natively import from node_modules. Bundlers resolve imports and create optimized files
- Vite - Modern, fast. Uses native ES modules in development. Build with Rollup. Best for new projects
- Webpack - Most popular bundler. Highly configurable. Powers Create React App, Next.js (internally)
- Minification - Removes whitespace, shortens variable names. Reduces file size 50-70%
- Tree shaking - Removes unused code: import only what you use, rest is deleted
- Transpilation - Babel converts modern JS (ES2024) to older syntax for browser compatibility
Build Tools Code
// Vite setup (modern, recommended)
// npm create vite@latest my-app -- --template vanilla
// cd my-app
// npm install
// npm run dev → development server (HMR: hot module replacement)
// npm run build → production build (minified, tree-shaken)
// File structure with Vite:
// my-app/
// ├── index.html
// ├── src/
// │ ├── main.js (entry point)
// │ ├── utils.js (modules)
// │ └── styles.css
// ├── package.json
// └── vite.config.js
// Modern import/export works out of the box!
// import { formatDate } from './utils.js';
// import './styles.css'; // CSS is imported in JS!
// Webpack config (for existing projects)
const webpackConfig = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: "/dist"
},
module: {
rules: [
{ test: /\.js$/, use: "babel-loader" },
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
}
};
console.log("Build tools: Vite for new projects, Webpack knowledge for existing ones");
console.log("Both handle: bundling, minification, tree-shaking, dev server");Tip
Tip
Use Vite for new projects - it's 10-100x faster than Webpack in development. The HMR (Hot Module Replacement) is nearly instant. For existing Webpack projects, migration guides make switching straightforward.
ESM is the standard - use import/export for new projects
Common Mistake
Warning
Not configuring tree-shaking properly. import _ from 'lodash' imports the entire library (70KB). import { debounce } from 'lodash-es' imports only what you need (4KB). Always use ES module imports for tree-shakable libraries.
Practice Task
Note
Build tools: (1) Create a project with Vite: npm create vite@latest. (2) Add CSS modules and see how they scope styles. (3) Build for production and examine the output bundle size.
Quick Quiz
Key Takeaways
- Build tools transform your code for production - bundle modules, minify code, compile modern syntax for older browsers, and optimize assets.
- Why bundle? - Browsers can't natively import from node_modules. Bundlers resolve imports and create optimized files
- Vite - Modern, fast. Uses native ES modules in development. Build with Rollup. Best for new projects
- Webpack - Most popular bundler. Highly configurable. Powers Create React App, Next.js (internally)