webpack-tutorials.md

Webpack Tutorials

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

Overviews and Introductions

• Webpack Documentation
  https://webpack.js.org/
  Webpack's new documentation site, explaining concepts, configuration, and recipes

• Webpack Academy
  https://webpack.academy/
  Courses on Webpack concepts and usage, from the Webpack team.

• Webpack from First Principles
  https://www.youtube.com/watch?v=WQue1AN93YU
  A screencast video explaining what Webpack is and why you would want to use it

• Why Would I Use a Webpack?
  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". (Originally written as a Reddit comment that was removed - see the resulting comments.)

• 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.

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

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

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

• Webpack: The Missing Guide
  http://www.eloquentwebapp.com/webpack-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?
  https://x-team.com/blog/webpack-can-absolute-beginners/
  A plain-English explanation of what Webpack is and what problems it can help solve.

• Seamless client side Javascript with Webpack
  https://opbeat.com/community/posts/seamless-client-side-javascript-with-webpack-by-jack-franklin/
  A talk by Jack Franklin, talking about what problems Webpack solves

• 4 Key Concepts of Webpack
  https://www.netlify.com/blog/2017/01/03/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
  http://arianv.com/post/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
  https://naomiajacobs.github.io/WebpackTalk/
  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.

• Webpack 2
  http://sokra.github.io/slides/webpack2/#3
  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.

Basic Tutorials

• 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 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

• 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 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.

• Module Bundling with Webpack: Getting Started Guide
  https://www.codementor.io/javascript/tutorial/module-bundler-webpack-getting-started-guide
  Tutorial covering basic config setup and concepts

• Webpack Tutorials for Beginners
  https://www.youtube.com/playlist?list=PL4cUxeGkcC9iTQ3J5oa6orDIMQKKxl8dC
  A video tutorial series explaining Webpack config and loaders

• Getting Started with Webpack 2
  https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783
  An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals.

• Migrating to Webpack 2
  http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/
  Tips for migration an existing Webpack config to work properly with Webpack 2

• Webpack 101
  https://github.com/brunoscopelliti/webpack-101
  A tutorial that builds up a Webpack config step-by-step, explaining why and how each change is made.

• Migration to Webpack@2
  https://blog.shakacode.com/migration-to-webpack-2-c9803871b931
  Some tips for updating a Webpack 1 config to work with Webpack 2

• A Beginner's Guide to Webpack 2 and Module Bundling
  https://www.sitepoint.com/beginners-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
  http://www.jumoel.com/2017/zero-to-webpack.html
  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
  https://www.smashingmagazine.com/2017/02/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
  http://presentations.survivejs.com/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
  https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/
  A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals

• webpack By Example
  https://medium.com/front-end-hacking/webpack-by-example-part-1-1d07bc42006a
  https://medium.com/front-end-hacking/webpack-by-example-part-2-ff6c75b1e20
  https://medium.com/front-end-hacking/webpack-by-example-part-3-a4ceaaa6299a
  https://medium.com/front-end-hacking/webpack-by-example-part-4-f55821016821
  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
  https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e
  https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-ii-66beb5dbccc2
  https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iii-d374c021f9fc
  https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iv-102efc01ffad
  https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-v-495dba627718
  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
  https://medium.com/@Idan_Co/a-webpack-setup-that-makes-sense-35b4b6b8ef5f
  Looks at ways to define Webpack setup and tasks in a more modular, reusable manner.

• Webpack: A Gentle Introduction to the Module Bundler
  https://auth0.com/blog/webpack-a-gentle-introduction/
  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
  https://www.netlify.com/blog/2017/11/30/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
  https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a
  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
  https://scotch.io/tutorials/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
  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",

• Advanced Webpack
  http://presentations.survivejs.com/advanced-webpack/
  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?
  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 Loader Variations
  http://andrewhfarmer.com/webpack-loader-variations/
  Examples of the different ways to define a loader in a Webpack config

• Remix's Software Stack: Webpack
  https://blog.getremix.com/remixs-software-stack-webpack-34990de9d803
  An explanation of the configuration settings and options inside one company's Webpack config

• Webpack devtool source map options
  http://cheng.logdown.com/posts/2016/03/25/679045
  A list of the available values for the devtool option in a Webpack config

• Webpack and the Public Path Config
  http://tomasalabes.me/blog/_site/web-development/2016/12/10/Webpack-and-the-public-path.html
  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
  http://erikaybar.name/webpack-source-maps-in-chrome/
  Tips for proper configuration of sourcemaps, including some gotchas and differences between devtool config values.

• Conditional Build with Webpack
  https://medium.com/tech-angels-publications/conditional-build-with-webpack-72c36b51abbc
  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
  https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172
  Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments.

• Webpack 2 Loader Variations
  http://andrewhfarmer.com/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
  https://dev.to/nitishdayal/stages-of-learning-webpack-pt-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
  https://dev.to/nitishdayal/stages-of-learning-webpack-pt-3---sourcemaps-loaders--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
  https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9
  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.

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

• webpack-blocks
  https://github.com/andywer/webpack-blocks
  Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement), �

• webpack-flow
  https://github.com/webpack-flow/webpack-flow
  A set of utilities to manage sharable webpack configs and make them reusable.