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

• 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?
  http://x-team.com/2016/09/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.

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

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

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.