Also see the Awesome Webpack list for more links to documentation, plugins, people, utilities, and articles.
Overviews and Introductions
Webpack's new documentation site, explaining concepts, configuration, and recipes
Courses on Webpack concepts and usage, from the Webpack team.
Webpack from First Principles
A screencast video explaining what Webpack is and why you would want to use it
"Why use packers/bundlers?"
http://tinselcity.net/whys/packers A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together".
Egghead.io - Intro to Webpack (Playlist)
Three lessons giving a brief introduction to webpack and loaders concepts. First lesson is free.
Webpack - The Module Bundler
HTML slideshow that describes Webpack's features and links to demos
A useful overview of what Webpack can do and why you would want to use it.
Webpack 101: An Introduction to Webpack
A useful intro to Webpack's concepts and capabilities, with some examples.
Webpack: The Missing Guide
An intro to what Webpack is, what it can do, and how to use it.
What is Webpack and what can it do for you?
A plain-English explanation of what Webpack is and what problems it can help solve.
A talk by Jack Franklin, talking about what problems Webpack solves
4 Key Concepts of Webpack
A recorded presentation by Webpack core team member Sean Larkin, explaining Webpack's core concepts and future goals.
Module Bundling and Webpack in Simple Terms
An informative high level overview that explains what Webpack does and how it works.
Webpack: It's Not Magic
An excellent HTML slideshow that explains how Webpack allows you to use code that is nice to write, and transforms it into code that the browser fully understands. Also looks at how Webpack works conceptually.
A slideshow from Webpack's original author. Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling.
SurviveJS - Webpack
A full book online book that covers setting up Webpack for both development and production. Also touches topics such as ESLint and npm.
Beginner's Guide to Webpack
A walkthrough for getting started with a Webpack dev setup
Webpack Your Bags
In-depth article describing what Webpack is, why you would want to use it, and how to set it up
Webpack + React is Awesome
Another tutorial explaining how to use and set up Webpack
Beginner Webpack Tutorial
Very well-written tutorial that steps through the many pieces in a typical Webpack config, how to configure them, and what they're used for. (Two parts so far, more to come.)
A repository with examples and exercises to learn webpack for newbies
Utilizing Webpack and Babel to build a React.js App
A lesson from a larger course on React. Covers basic Webpack concepts and setup.
Introduction to Webpack
Covers basic setup, loaders, managing styles and images, and more.
Why I think Webpack is the right approach to build pipelines
Some thoughts on how Webpack works, and why its "tree of modules" approach to bundling makes sense. Useful for understanding how you can work with Webpack.
Webpack is not as complicated as you think
A simple overview of a basic Webpack config looks like.
Creating a React and Webpack Project (screencast)
A video walkthrough of the basic setup for a Webpack-based project.
Webpack Deep Dive
A set of slides that teach Webpack concepts and usage, with an associated repo that has diffs demonstrating each set of changes and configuration.
Webpack: When To Use and Why
TL;DR It took me a long time to understand Webpack and how it fits in the build process. This is what I wish someone had told me.
Pro React Appendix: Webpack for React
A free online chapter of the Pro React book, covering Webpack concepts and usage.
A Comprehensive Introduction to Webpack, the Module Bundler
A solid article covering basic Webpack configuration and setup.
Module Bundling with Webpack: Getting Started Guide
Tutorial covering basic config setup and concepts
Webpack Tutorials for Beginners
A video tutorial series explaining Webpack config and loaders
Getting Started with Webpack 2
An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals.
Migrating to Webpack 2
Tips for migration an existing Webpack config to work properly with Webpack 2
A tutorial that builds up a Webpack config step-by-step, explaining why and how each change is made.
Migration to Webpack@2
Some tips for updating a Webpack 1 config to work with Webpack 2
A Beginner's Guide to Webpack 2 and Module Bundling
An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server
From zero to Webpack, one error at a time
A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added.
A Detailed Introduction to Webpack
A solid introduction to Webpack's basic concepts and usage, including CLI usage, config file setup, use of loaders and plugins, and chunking for lazy-loading
Webpack - From Apprentice to Journeyman
A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack.
Webpack - From Journeyman to Master
A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals
webpack By Example
A 4-part series that illustrates core Webpack concepts via a series of small example repos, with explanations of the source and concepts in the articles.
How to setup Webpack 2.0 from scratch in 2017
A detailed tutorial that walks through setting up a Webpack config piece-by-piece, and explains several Webpack concepts along the way.
A Webpack Setup that Makes Sense
Looks at ways to define Webpack setup and tasks in a more modular, reusable manner.
Webpack: A Gentle Introduction to the Module Bundler
A well-written tutorial that explains core Webpack concepts like entries, output, loaders, and plugins, and shows how to set up a basic build config for an application.
Starting with Webpack from scratch
Walks through setting up a Webpack config from the ground up, with explanations and examples of how to configure Webpack and what the resulting output looks like.
Webpack 3 quickstarter: Configure Webpack from scratch
A walkthrough for Webpack setup that covers basic entry and output definition, webpack-dev-server setup, and adding loaders and plugins.
Setting up Webpack for any project
Walks through the setup of a basic Webpack config, and common features such as loaders for Babel and SASS, plugins for extracting CSS, inserting defined constants, and tools for different development environments.
Configuration Terms and Concepts
Webpack: The Confusing Parts
A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving.
Webpack Series Part 1: Some Configs Explained
Describes a number of Webpack config options, including "noParse", "libraryTarget", and "externals"
Angular + Webpack <3
A long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the "entry" and "output" options, "loaders", and "plugins",
An in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading.
Why Can't Anyone Write a Simple Webpack Tutorial?
A goofy but informative look at many of the concepts and pieces that make up Webpack
Webpack Loader Variations
Examples of the different ways to define a loader in a Webpack config
Remix's Software Stack: Webpack
An explanation of the configuration settings and options inside one company's Webpack config
Webpack devtool source map options
A list of the available values for the
devtooloption in a Webpack config
Webpack and the Public Path Config
Looks at how to configure URLs for resources that are not part of the final output bundle, such as images on CDNs
Source Maps with Webpack in Chrome
Tips for proper configuration of sourcemaps, including some gotchas and differences between
Conditional Build with Webpack
Suggestions for creating shared configs that can be used across multiple apps, with certain values replaced at build time.
The Fine Art of the Webpack 2 Config
Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments.
Webpack 2 Loader Variations
A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file.
Stages of Learning Webpack, Part 2 - The Config
Explains what Webpack is by explaining some of the problems it attempts to solve, and looks at the basics of a Webpack configuration.
Stages of Learning Webpack, Part 3 - SourceMaps, Loaders, and Plugins
Shows how to configure sourcemaps for debugging, use a loader to add TypeScript support, and add a plugin to generate an HTML index page for the bundle.
Let's talk about our Webpack config files
The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities.
Upgrade to Webpack 4
Some quick tips for upgrading a Webpack config from v3 to v4
Webpack Configuration Utilities
Provides utilities to make it easier to compose your config object, so it's easier for people to read.
The power of webpack with simplified configuration. All the tools to effectively build in development and then ship for production with minimal setup.
Webpack simplified in a fluent API with presets & an escape hatch so you're not locked in.
An easy way to create configuration files for Webpack, with modularized individual features anbd preset configs.
Maintainable Webpack Config
An experiment to make Webpack configs testable and maintainable
Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement), �
A set of utilities to manage sharable webpack configs and make them reusable.
Online tool for creating your own webpack config by selecting the features you need. It's a visual way of learning webpack, and you can download your project as a zip file when you're done!