# landing-m4: Bundle
## Learning Objectives
- Bundlers
- Supporting template plugins
- Minification plugins
- PostCSS plugins
## Abstract
In this project, you will refactor your existing project to use modern frontend tooling. This includes setting up a module bundler, splitting code into reusable templates, optimizing assets, and enhancing CSS with PostCSS. The goal is to improve the project's maintainability, performance, and development workflow.
## Context
As web applications grow in complexity, managing code, assets, and dependencies becomes increasingly challenging. Writing everything in plain HTML, CSS, and JavaScript without any structure or optimization can lead to:
- **Code Duplication**: Repeating the same code in multiple places, making it harder to maintain.
- **Poor Performance**: Large, unoptimized files that slow down page loading.
- **Browser Compatibility Issues**: CSS and JavaScript that don’t work consistently across all browsers.
- **Inefficient Development**: Manually repeating tasks like minification, image optimization, and code splitting.
This is where **module bundlers** and modern frontend tooling come into play. Bundlers like Webpack, Vite, or Parcel solve these problems by:
- **Organizing Code**: Allowing you to split your code into reusable modules or components, making it easier to maintain and scale.
- **Optimizing Assets**: Automatically minifying CSS, JavaScript, and HTML, as well as optimizing images and fonts for faster loading.
- **Enhancing CSS**: Using tools like PostCSS to add modern features (e.g., nesting, variables) and ensure cross-browser compatibility.
- **Improving Developer Experience**: Providing features like hot module replacement (HMR) for faster development and live reloading.
- **Preparing for Production**: Generating a production-ready build that is optimized, obfuscated, and ready to deploy.
## General Criteria
- ...
## Mandatory Part
...
### Module Bundler Setup
- ...
### Templates and Partials
- ...
### Minification and Obfuscation
- ...
### PostCSS Integration
- ...
## Support
...
