Overview What You Will Learn Curriculum Instructor

Course Overview

Webpack is a module bundler tool for modern JavaScript applications. Webpack, along with its ecosystem, helps you to compile and optimize your source code. It makes our JavaScript runnable on browsers, fast and safe. Webpack solves lots of problems, but it comes with a cost: there are lots of configurations. How can we know which configuration to use and when to use them? Will these loaders and plugins be best fit for my application? How can I make my over-3-year-old JavaScript app load faster? What is Webpack vs Babel? And more. In this course, you will walk through the most important ideas of Webpack and we will answer the above questions together.

The course begins with an overview of a typical modern JavaScript app using webpack. We will take a glimpse of it first then we will go right into details in next sections. You will learn how to import (or require) your assets like CSS, images, fonts, etc. into your JavaScript source code. Next you will learn how to set up loaders to compile your ES6+ or even Typescript. Further, we will look into how to set up Webpack with React, VueJS or Angular. After that, you will learn how to set up webpack plugin, and development environment with Hot Module Replacement. Moreover, you will learn how to optimize your source code using bundle analyzer tool, minify tool and get your hands on tree shaking. Eventually, once our source code grows big enough, you need to look into lazy load and code splitting. Moreover, you will learn how to set up a Micro Frontend project structure using Webpack Federation. Finally, the last section shows you how to integrate Webpack configuration to NodeJS/Express server and make sure our code is secure by setting up nonce and Content Security Policies.

By the end of the course, you will be able to build your own Javascript app or customize exist Webpack project with ease.

What You Will Learn

  • Learn to set up your modern web app using Webpack
  • Learn about the basic concepts of webpack
  • Learn how to use the most popular Webpack Loaders and plugins
  • Learn how to setup Micro Frontend project structure using Webpack Federation
  • Learn how to set up your development environment as well as production
  • Learn how to analyze and optimize your source code with Webpack
  • Learn how to integrate and secure your setup with NodeJS/ExpressJS Server

Program Curriculum

  • Compiler
  • What is Webpack?
  • Webpack Project Overview
  • $7 Million Cybersecurity Scholarship by EC-Council
  • Chapter 01 Quiz

  • Load CSS
  • Load Image
  • output.publicPath
  • Chapter 02 Quiz

  • Introduction
  • Setup Babel Loader
  • Setup ESBuild Loader
  • Setup Typescript
  • Source Map
  • Chapter 03 Quiz

  • What is Webpack Plugin?
  • MiniCssExtractPlugin
  • Caching, Content Hash, and HtmlWebpackPlugin
  • Other Common Plugins
  • Chapter 04 Quiz

  • Setup .env
  • React App Setup
  • Webpack Dev Server
  • Chapter 05 Quiz

  • Practical Tips and Strategies
  • Introduce Project Setup
  • Tree Shaking
  • Chapter 06 Quiz

  • Introduction to Code Splitting
  • Code Splitting with Multiple Entries
  • Prevent Code Duplication
  • Prefetch Resources for Next Navigation
  • Dynamic Import (Lazy Load)
  • Dynamic Import React Component
  • Chapter 07 Quiz

  • Basic Setup
  • Setup Typescript
  • Lazy load and Error Handling
  • Chapter 08 Quiz

  • Deploy to Public Directory
  • Integrate with Server-side Routing
  • HtmlWebpackPlugin and EJS: Passing Data from Server to Client
  • Setup Nonce & Content Security Policy (CSP)
  • Chapter 09 Quiz
Load more modules

Instructor

Rudy Huynh

Rudy Huynh has over 7 years of experience in front-end and JavaScript development and is a senior developer specializing in React and NodeJS. Since the release of React Hooks, he has been working extensively with the feature, building applications and helping his team members to master React Hooks. He is passionate about teaching and sharing his knowledge with others and has led workshops on JavaScript and React. With his wealth of experience and dedication to teaching, our author is the perfect guide to help you master React Hooks and take your development skills to the next level.

Join over 1 Million professionals from the most renowned Companies in the world!

certificate

Empower Your Learning with Our Flexible Plans

Invest in your future with our flexible subscription plans. Whether you're just starting out or looking to enhance your expertise, there's a plan tailored to meet your needs. Gain access to in-demand skills and courses for your continuous learning needs.

Monthly Plans
Annual Plans
Save 20% with our annual plans!

Pro

Ideal for continuous learning, offering extensive resources with 600+ courses and diverse Learning Paths to enhance your skills.

$ 499.00
Billed annually or $59.00 billed monthly
Get Started Now
Start your 7-day trial for $1

What is included

  • 700+ Premium Short Courses
  • 50+ Structured Learning Paths
  • Validation of Completion with all courses and learning paths
  • New Courses added every month
Early Access Offer

Pro +

Experience immersive learning with Practice Labs, CTF Challenges, and exclusive EC-Council certifications for comprehensive skill-building.

$ 599.00
Billed annually or $69.00 billed monthly
Get Started Now
Start your 7-day trial for $1

Everything in Pro and

  • 800+ Practice Lab exercises with guided instructions
  • 150+ CTF Challenges with detailed walkthroughs
  • New Practice Labs and Challenges added every month
  • 3 Official EC-Council Essentials Certifications¹ (retails at $897!)
    Exclusive Bonus with Annual Plans

¹This plan includes Digital Forensics Essentials (DFE), Ethical Hacking Essentials (EHE), and Network Defense Essentials (NDE) certifications. No other EC-Council certifications are included.

Related Courses

  • Introduction to Raspberry Pi

    Introduction to Raspberry Pi

    Short Course

    Introduction to Raspberry Pi

    Software Development

    Learn How to Create Software and Hardware Projects using Rasp...

    $49.99

    Beginner

    2 hr 0 m

  • Hands-on React Native

    Hands-on React Native

    Short Course

    Hands-on React Native

    Software Development

    Learn to build modern, beautiful & powerful native iOS an...

    $49.99

    Beginner

    6 hr 32 m

  • Learn Python Programming with 100 Practicals

    Learn Python Programming with 100 Practicals

    Short Course

    Learn Python Programming with 100 Practicals

    Software Development

    Learn Python Programming from scratch.

    $69.99

    Beginner

    5 hr 30 m

  • Game Development with C# and Unity – Reinforce Your C# Codes

    Game Development with C# and Unity – Reinforce Your C# Codes

    Short Course

    Game Development with C# and Unity – Reinforce Your C# Codes

    Software Development

    Learn to write code that is not just functional, but clean, m...

    $49.99

    Advanced

    4 hr 18 m

  • React.JS Crash Course: The Complete Course for Beginners

    React.JS Crash Course: The Complete Course for Beginners

    Short Course

    React.JS Crash Course: The Complete Course for Beginners

    Software Development

    Create web apps that are robust, quick, user-friendly, and re...

    $59.99

    Beginner

    2 hr 0 m

  • Optimizing and Securing Ansible Playbooks

    Optimizing and Securing Ansible Playbooks

    Short Course

    Optimizing and Securing Ansible Playbooks

    Software Development

    Efficiently Automating Container and System Management with S...

    $99.99

    Intermediate

    5 hr 0 m

  • OAuth, OpenID, and SAML Crash Course Security for Web and Mobile

    OAuth, OpenID, and SAML Crash Course Security for Web and Mobile

    Short Course

    OAuth, OpenID, and SAML Crash Course Security for Web and Mobile

    Software Development

    Learn how OAuth2, OpenID, and SAML work as open standards for...

    $49.99

    Advanced

    1 hr 0 m

  • Spring Core Framework with Spring Tool Suite

    Spring Core Framework with Spring Tool Suite

    Short Course

    Spring Core Framework with Spring Tool Suite

    Software Development

    The hands-on learning experience of Spring Core Framework

    $49.99

    Intermediate

    1 hr 37 m

1 8