### Webpack Tutorials Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpack) 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 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)** 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. - **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 - **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)** https://www.jackfranklin.co.uk/blog/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. - **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** https://www.jackfranklin.co.uk/blog/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** https://www.jumoel.com/posts/zero-to-webpack 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** https://javascriptstuff.com/webpack-loader-variations/ Examples of the different ways to define a loader in a 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. - **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. - **Upgrade to Webpack 4** https://dev.to/flexdinesh/upgrade-to-webpack-4---5bc5 Some quick tips for upgrading a Webpack config from v3 to v4 #### 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. - **createapp.dev** https://createapp.dev/webpack 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!