Learn Webpack 2 from scratch

Learn how to build web applications using Javascript's most popular build tool... Webpack 2

Created byRobert Guss

Last updated 11/2025

English

English [Auto],

What you'll learn

Know how to build web applications using Webpack 2

Course content

1 section • 11 lectures • 1h 16m total length

Installation & Getting Started14:56
Learn how Webpack 2 bundles JavaScript and assets into a bundle.js in dist. Follow a practical setup using npm or yarn and a webpack.config.js with entry and output.
Webpack Loaders15:41
Learn how webpack loaders transform CSS and SCSS files, and enable Babel to compile ES6 to ES5, by configuring webpack with style-loader, css-loader, sass-loader, and babel-loader.
Webpack --watch2:26
Enable webpack watch to automatically recompile bundles on file save by adding a watch script in package.json and running yarn run watch, speeding up development.
Webpack & PostCSS7:41
Learn to integrate postcss with webpack by using postcss loader, configuring postcss.config.js, and applying plugins like autoprefixer, rucksack, lost, and cssnano to optimize CSS.
Extracting CSS to a separate file4:55
Learn to extract CSS from JavaScript using the extract text plugin in Webpack, wiring up style, CSS, and Sass loaders, and output a separate styles.css for faster page load.
Enabling CSS & JS sourcemaps7:53
Learn to enable source maps for JavaScript and scss with webpack, so errors in the bundled code point back to the original modules and CSS files, improving debugging.
Creating multiple bundles8:35
Discover how to create multiple bundles by configuring separate entry points and dynamic outputs, and automate HTML page generation and dist cleanup with HTML Webpack plugin and Clean Webpack plugin.
Webpack Dev Server3:29
Install and use the webpack dev server to run a local development server that auto reloads on CSS and JavaScript changes, streamlining updates and testing.
Browsersync proxy with Webpack Dev Server5:32
Connect browser-sync as a proxy to the Webpack dev server, install the browser-sync plugin, run both servers, and enable real-time responsive testing across devices.
Working with multiple HTML files5:10
Learn to work with multiple html files by using the html webpack plugin to create index.html and about.html, each referencing its own bundle via templates and chunks.
Bonus Lecture0:14

Requirements

You should have a basic understanding of HTML, CSS & Javascript

Description

UPDATE

I have recently released a brand new free course called "Webpack 5 Fundamentals." If you are looking for the most up to date resource on learning Webpack, Webpack 5 Fundamentals is the course you are looking for. Unfortunately, Udemy does not allow me to post links here, so you will need to search for "Webpack 5 Fundamentals" and my course should be the first in the results. You can also look at my instructor profile and see all of the courses I teach and find it that way.

---

In this course you will learn a solid foundational understanding of Webpack 2 and its ecosystem. My approach to teaching Webpack 2 in this course, is to walk you through the documentation so you become comfortable learning new Webpack concepts on your own after taking this course. One of the most important skills as a web developer is knowing how to read and utilize documentation. Things are constantly changing and evolving in our world, and so knowing how to study and explore documentation is essential to being successful in this industry.

Webpack is by far the most popular Javascript build tool in existence today and its popularity is only growing. Knowing and understanding Webpack is a very important and in demand skill as more and more companies are adopting it to build their sites and applications.

My goals for this course are to give you the foundational knowledge you need so you can begin creating your own customized Webpack configurations to meet you projects and clients specific needs. The Webpack ecosystem is massive and can be quite overwhelming. However, in this course I walk you through line by line through each configuration and setup so you understand and know exactly what is going on. No longer will you be overwhelmed when you open someone else' webpack.config.js file. Having this foundational knowledge will allow you to add custom plugins, loaders, build tools and anything else your project demands.

As a side note, I am very much open to suggestions. If there is a feature in Webpack that I have not covered here, but you would like me too, please send me a message or leave a comment in the discussion area and I will make more content to teach that topic. This course is FREE and always will be. My goal is to truly help as many people as I can, so please do not be shy in asking questions, providing feedback, comments, critiques, etc :)

Who this course is for:

Beginner to intermediate web developers