Introduction
- Introduction
- What you need for this course
Initial Setup and Integrating Webpack
- Why Do We Need Webpack
- Setting Up Our Application
- Install Webpack And Integrate It With NPM
- Small Note about Github Repository
- Integrating Webpack Into Our JS Application
- Custom Webpack Configuration
Asset Modules
- Introduction to Asset Modules
- Handling Images With Webpack
- publicPath
- Asset/inline Module Type
- General Asset Type
- Asset/source Module Type
Loaders
- What Is Webpack Loader?
- Handling CSS With Webpack
- Handling SASS
- Using Latest JavaScript Features With Babel
Plugins
- What Is Webpack Plugin?
- Minification of the Resulting Webpack Bundle
- Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1
- Extracting CSS Into a Separate Bundle, Part 2
- Browser Caching
- How To Clean Dist Folder Before Generating New Bundles
- Generating HTML Files Automatically During Webpack Build Process
- Customizing Generated HTML Files
- Integration with Handlebars
- More Webpack Plugins
Production vs Development Builds
- Introduction
- Mode
- Managing Webpack Config for Production and Development Use Cases
- Faster Development with webpack dev server
- Cleaning Up A Bit
Multiple Page Applications
- Introduction
- Creating KiwiImage Component
- Code Splitting in Webpack: Multiple JS and CSS Bundles
- How To Generate Multiple HTML Files
- Extracting Common Dependencies While Code Splitting
- Setting Custom Options for Code Splitting
- How To Setup Development Environment For Multiple Page Application
Github Repository
- How To Use Github Repository
Webpack Integration With Node And Express
- Introduction
- Getting Code for Single Page Application
- Integrating Express Into Our Application
- Serving HTML Pages via Express
- Handling JS and CSS via Express
- Getting Code for Multiple Page Application
- Integrating Express.js Into A Multiple Page Application
Module Federation
- Creating 2 Separate Applications, Part 1
- Creating 2 Separate Applications, Part 2
- Setting Up Module Federation
- Consuming Federated Modules
- Modules Are Loaded At Runtime
- Creating Micro Frontends
- Micro Frontends In Action, Part 1
- Micro Frontends In Action, Part 2
- Navigation Bar Component
Integration with jQuery
- Getting the Source Code
- Integration with jQuery
Using ESLint
- Configuring ESLint
Summary
- Summary
- Bonus Lecture
