Webpack Mastery - Bundle, Optimize & Scale Web Sites

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Certificate Available
Effort

7 weeks, 1 hour a week
Sessions

Self-Paced
Level

Intermediate
Subtitles

English

Found in

Overview

Google, IBM & Meta Certificates – 40% Off

One Coursera Plus subscription covers most Professional Certificates on Coursera.

Unlock All Certificates

This course teaches Webpack from fundamentals to advanced techniques. You'll master loaders and plugins, optimize JavaScript delivery, and explore advanced topics like code splitting, lazy loading, and tree shaking. The capstone project will help you apply these skills to build a weather dashboard using Webpack, React, and APIs. In this course, you’ll start by understanding the basics of Webpack and its importance in modern development. You’ll learn how Webpack helps bundle and optimize web applications efficiently, covering tools like loaders and plugins, and the differences between development and production modes. The course progresses into advanced concepts such as code splitting, lazy loading, and tree shaking. These topics are essential for optimizing performance in large applications. You’ll also gain hands-on experience with Webpack’s development server and learn how to set up hot-reloading to streamline your workflow. By the end of the course, you will be able to integrate Webpack with modern frameworks like React and TypeScript, building optimized applications. You will apply everything learned by completing a capstone project: a weather dashboard using APIs and modular components. This project allows you to apply real-world practices and make your Webpack skills practical and usable. This course is ideal for web developers, especially those working with JavaScript, React, and TypeScript, who want to enhance their skills in bundling and optimizing web applications. It's also great for front-end developers seeking to improve their workflow with Webpack. Basic web development knowledge is helpful but not required. Whether you're new to Webpack or looking to refine your skills, this course will provide you with the tools and techniques necessary for building optimized web applications. This course follows a hands-on, progressive approach. It starts with the basics of Webpack, ensuring a solid understanding of its fundamentals. As you advance, you’ll tackle more complex concepts like code splitting, lazy loading, and integration with React and TypeScript. The practical capstone project reinforces your learning through real-world application. This course is based on Webpack Mastery - Bundle, Optimize & Scale Web Sites, by Ahmed Elsakka. This video is licensed and distributed by Packt. All rights reserved. Packt is one of the world's most prolific publishers of cutting-edge technical content. For over two decades we've made it our mission to curate and publish the knowledge of only the very best technical experts. We focus on real-world courses that help our customers get the job done, with coverage that extends across a wide range of established and cutting-edge technical topics. If you're an individual or an organisation that embraces learning by doing, Packt is the perfect fit for you.

Syllabus

Introduction
- This module introduces learners to the basics of Webpack, guiding them through setting up their first configuration and understanding its fundamental structure. Learners will gain an overview of the course and the key concepts they will explore throughout the Webpack Mastery journey.
Webpack Basics
- This module provides an introduction to Webpack, covering how to use loaders for file handling, plugins for extending functionality, and the differences between development and production modes to optimize build processes. Learners will gain practical skills in configuring and fine-tuning Webpack for various project needs.
Webpack Loaders Deep Dive
- This module explores the use of Webpack loaders to handle various types of files in a project. Learners will gain practical skills in configuring Babel, CSS, and asset loaders to optimize web development workflows. The content emphasizes efficient file management and code transpilation techniques.
Webpack Plugins
- This module explores essential Webpack plugins that streamline build processes, enhance asset management, and provide insights into bundle optimization. Learners will gain hands-on knowledge of tools like CleanWebpackPlugin, MiniCssExtractPlugin, and BundleAnalyzerPlugin to improve development efficiency and performance.
Advanced Webpack Concepts
- This module covers advanced techniques for optimizing Webpack configurations, including code splitting, lazy loading, tree shaking, and setting up the Webpack Dev Server. Learners will gain practical skills to improve application performance and streamline development workflows.
Webpack and Modern JavaScript Frameworks
- This module teaches how to integrate Webpack with modern JavaScript frameworks like React and TypeScript. Learners will gain hands-on skills in configuring Webpack for efficient development and production builds, including the use of loaders, plugins, and asset management.
Capstone Project - Weather Dashboard
- This module guides learners through the development of a weather dashboard, covering project setup, Webpack configuration, UI implementation, API integration, and performance optimization techniques. Learners will gain hands-on experience in building a full-featured web application with real-time data.