webpack-tutorials

Also see the Awesome Webpack list for more links to documentation, plugins, people, utilities, and articles.

Basic Tutorials

• Egghead.io - Intro to Webpack (Playlist) https://egghead.io/playlists/intro-to-webpack-4ca2d994 Three lessons giving a brief introduction to webpack and loaders concepts. First lesson is free.

• SurviveJS - Webpack http://survivejs.com/webpack/introduction 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 https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460 A walkthrough for getting started with a Webpack dev setup

• Webpack - The Module Bundler http://alp82.github.io/webpack-experiment-slides/#/ HTML slideshow that describes Webpack's features and links to demos

• Webpack Your Bags http://blog.madewithlove.be/post/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 http://www.christianalfoni.com/articles/2014_12_13_Webpack-and-react-is-awesome Another tutorial explaining how to use and set up Webpack

• Beginner Webpack Tutorial https://github.com/AriaFallah/WebpackTutorial/tree/master/part1 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.)

• Learn Webpack https://github.com/danderu/learn-webpack A repository with examples and exercises to learn webpack for newbies

• Unpacking Webpack http://blog.tighten.co/unpacking-webpack A useful overview of what Webpack can do and why you would want to use it.

• Utilizing Webpack and Babel to build a React.js App http://tylermcginnis.com/react-js-tutorial-1-5-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 http://code.tutsplus.com/tutorials/introduction-to-webpack-part-1--cms-25791 http://code.tutsplus.com/tutorials/introduction-to-webpack-part-2--cms-25911 Covers basic setup, loaders, managing styles and images, and more.

• Why I think Webpack is the right approach to build pipelines http://devlog.disco.zone/2016/06/01/webpack/ 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 http://jilles.me/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) http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/ A video walkthrough of the basic setup for a Webpack-based project.

• Webpack 101: An Introduction to Webpack http://code.hootsuite.com/webpack-101/ A useful intro to Webpacks concepts and capabilities, with some examples.

• Webpack Deep Dive http://slides.com/kentcdodds/webpack-deep-dive#/ https://github.com/kentcdodds/es6-todomvc 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 http://blog.andrewray.me/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 http://www.pro-react.com/materials/appendixA/ A free online chapter of the Pro React book, covering Webpack concepts and usage.

• A Comprehensive Introduction to Webpack, the Module Bundler http://www.theodo.fr/blog/2016/07/a-comprehensive-introduction-to-webpack-the-module-bundler/ A solid article covering basic Webpack configuration and setup.

Configuration Terms and Concepts

• Webpack: The Confusing Parts

  https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

  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 http://tomasalabes.me/blog/_site/web-development/2016/04/30/Webpack-Series-Part-1.html Describes a number of Webpack config options, including "noParse", "libraryTarget", and "externals"

• Angular + Webpack <3 https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI/edit?usp=sharing 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",

• Why Can't Anyone Write a Simple Webpack Tutorial? https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed A goofy but informative look at many of the concepts and pieces that make up Webpack

Webpack Configuration Utilities

• webpack-config-utils https://github.com/kentcdodds/webpack-config-utils Provides utilities to make it easier to compose your config object, so it's easier for people to read.

• prepacked https://github.com/mikeyamadeo/prepacked The power of webpack with simplified configuration. All the tools to effectively build in development and then ship for production with minimal setup.

• terse-webpack https://github.com/ericclemmons/terse-webpack Webpack simplified in a fluent API with presets & an escape hatch so you're not locked in.

• Easy Webpack https://github.com/easy-webpack/core An easy way to create configuration files for Webpack, with modularized individual features anbd preset configs.

• Maintainable Webpack Config https://github.com/chrisvfritz/maintainable-webpack-config An experiment to make Webpack configs testable and maintainable