Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Webpack 5 Fundamentals
Rating: 4.5 out of 5(533 ratings)
9,580 students

Webpack 5 Fundamentals

Learn the latest version of Webpack along with other modern tools like Babel, Jest, ESLint, & Prettier.
Created byRobert Guss
Last updated 11/2025
English

What you'll learn

  • How to setup & configure Webpack 5 from scratch. You will also learn how to configure modern front-end tools together to create a complete Webpack starter kit for your projects.

Explore related topics

Course content

2 sections • 15 lectures • 1h 24m total length

  • Intro & Webpack Concepts4:57

    In this video we are going to go over the main concepts you need to understand for Webpack.

    https://webpack.js.org/concepts/

  • Installation & Setup8:41

    How to setup and install Webpack:

    GitHub Repo: https://github.com/robertguss/webpack-5-fundamentals-course

  • Webpack Dev Server & Hot Module Reloading (HMR)5:09

    How to setup Webpack Dev Server with Hot Module Reloading.

    Dev Server Docs: https://webpack.js.org/guides/development/#using-webpack-dev-server

    HTML Webpack Plugin Docs: https://webpack.js.org/plugins/html-webpack-plugin/

  • Babel6:32

    How to setup and configure Babel.

    Babel docs: https://babeljs.io/setup#installation

  • CSS & SCSS Loaders4:31

    How to setup and configure css and scss with Webpack.

    CSS Loader docs: https://webpack.js.org/loaders/css-loader/#root

    Style Loader docs: https://webpack.js.org/loaders/style-loader/

    Sass Loader docs: https://webpack.js.org/loaders/sass-loader/#getting-started

  • PostCSS & Mini CSS Extract Plugin12:22

    How to setup and configure PostCSS with Webpack.

    Post CSS Loader: https://webpack.js.org/loaders/postcss-loader/

    Autoprefixer docs: https://github.com/postcss/autoprefixer

    CSS Nano: https://cssnano.co/

    Rucksack CSS: https://www.rucksackcss.org/

    Mini CSS Extract Plugin docs: https://webpack.js.org/plugins/mini-css-extract-plugin/

  • Development & Production Webpack Configs7:13

    How to create separate Webpack configs for development and production environments.

  • Common Config - DRY6:19

    How to DRY (don't repeat yourself) our dev and prod configs

  • Code Splitting8:53

    How to do code splitting and prevent duplication between our files and bundles

    Code splitting docs: https://webpack.js.org/guides/code-splitting/

  • Recap3:46

Requirements

  • A basic understanding of JavaScript

Description

In this course, you will learn how to set up and configure Webpack 5 from scratch. We start with an empty directory and built up a complete Webpack starter kit, line by line. By the end of the course, we will have built a modern front-end starter kit with tools like Jest for unit testing, ESLint for linting, Prettier for formatting, and a whole bunch more.

Along the way, we will learn all about Webpack configurations for different environments like development & production, loaders, plugins, etc. Throughout the course, I teach you how to read and navigate Webpack's documentation so you not only understand the concepts but also understand where to go to learn more. Each project has its own specific needs, and by teaching you how to read the docs, you will now be able to configure Webpack to fit your specific project needs.

One of the benefits of taking this course is the direct access you get to me as your instructor. If you are stuck at any point and need some help, feel free to reach out in the forums or send me a message and I will get back to you asap.

See you inside.

Who this course is for:

  • Web developers of all levels

Report abuse