README.md

webpack is a module bundler.

webpack takes modules with dependencies and generates static assets representing those modules.

Awesome Webpack

A curated list of awesome Webpack resources, libraries, tools and applications

Inspired by the awesome list. Feel free to improve this list by contributing!

Contents

• Resources
  • Documentation
  • Community
  • Twitter Follows
• Libraries
  • Loaders
    • File Type
    • Component & Template
    • Styles
    • Language & Framework
    • Utility
    • Testing
  • Integrations
  • Plugins
  • Tools
• Research & Training
  • Articles
  • Videos
  • Courses
  • Books
  • Webpack Examples
  • Community Examples
    • Angular
    • Framework Agnostic
    • React
  • Other

Webpack Ecosystem

    Remember to Cast your vote for upcoming Webpack features!

Support Webpack

• Webpack Open Collective - Help support the teams ongoing development efforts.

Documentation

• Webpack 1.x - Webpack 1.x Documentation
• Webpack 2.x - Webpack 2.x Documentation

Community

• StackOverflow
• Medium
• Gitter Chat

Twitter

People passionate about Webpack (In no particular order)

• Sean T. Larkin - @TheLarkInn TPM at Microsoft. Developer Advocate and webpack core team member.
• Juho Vepsäläinen - @bebraw from SurviveJS and webpack core team member.
• Eric Clemmons - @ericclemmons VP of Software Development at HigherEdHQ. Webpack member.
• Patrick Stapleton - @gdi2290 from AngularClass, AngularAir and Angular Universal. Webpack member.
• Kent C. Dodds - @kentcdodds from PayPal Engineering and JavaScript Air. Webpack member.
• Johannes Ewald - @Jhnnns: Webpack core team member.
• Joshua Wiens - @d3viant0ne: Technical Lead for EasyMetrics. Webpack member.
• Jonathan Creamer - @jcreamer898: Microsoft MVP and Telerik Developer Expert.
• Kees Kluskens - @keeskluskens: - Software Engineer at Code Yellow, Webpack core team member.

Back to top

Libraries

Loaders

File Type

• File Loader: File loader module for Webpack. -- Maintainer: Webpack Team
• URL Loader: URL loader module for Webpack. -- Maintainer: Webpack Team
• HTML Loader: HTML loader module for Webpack. -- Maintainer: Webpack Team
• Raw Loader: Raw file loader module for Webpack. -- Maintainer: Webpack Team
• Image Loader: Image minimizing loader for webpack. -- Maintainer: Andy VanWagoner
• Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki
• SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer: Hovhannes Babayan
• json5 Loader: json5 loader module for Webpack. -- Maintainer: Webpack Team
• json Loader: json loader module for Webpack. -- Maintainer: Webpack Team
• mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso
• wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas
• Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc.
• Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski
• GraphQL Loader: .graphql document loader. -- Maintainer: Stephen Wan
• C/C++ Loader: Load native C/C++ files with minimal bundle bloat. -- Maintainer: Scott Lott

Component & Template

• Angular2 Template Loader: Inlines html and style's in Angular2 components. -- Maintainer: Sean Larkin
• Handlebars Loader: A handlebars template loader for Webpack. -- Maintainer: Paul Carduner
• Vue Loader: Webpack loader for Vue.js components. -- Maintainer: Vuejs Team
• SVG React Loader - Webpack SVG to React Component Loader. -- Maintainer: Jerry Hamlet
• Underscore Loader - Underscore and Lodash template loader. -- Maintainer: Emmanuel Antico
• ngTemplate Loader - Angular1 Template Loader. -- Maintainer: Toby Rahilly
• ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer: Severin Friede
• Markup-inline Loader Inline SVGs to HTML -- Maintainer: Zhicheng Wang
• Polymer Loader - Loader for Polymer elements. -- Maintainers: Rob Dodson - Chad Killingsworth - Bryan Coulter
• Tag Loader - Loader for Riot tag files. -- Maintainer: Riot Team
• Twig Loader - Twig template loader. -- Maintainer: Zimmo.be Team
• Auto ngTemplate Loader: Autodetect Angular 1 templates and load them. -- Maintainer: Yash Kulshrestha
• Pug Loader - Pug template loader (formerly Jade). -- Maintainer: Pug Team
• Simple Nunjucks Loader - Nunjucks template loader. -- Maintainer: ogonkov

Styles

• Style Loader: Style loader module for Webpack. -- Maintainer: Webpack Team
• PostCSS Loader: PostCSS loader for Webpack. -- Maintainer: PostCSS Team
• CSS Loader: CSS loader module for Webpack. -- Maintainer: Webpack Team
• SASS Loader: SASS loader for Webpack. -- Maintainer: Jorik Tangelder
• Less Loader: Less loader module for Webpack. -- Maintainer: Webpack Team
• Stylus Loader: A stylus loader for webpack. -- Maintainer: Kyle Robinson Young
• Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer: Kriasoft Team
• Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer: Zack Young
• SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer: ShakaCode

Language & Framework

• TS Loader: TypeScript loader for webpack. -- Maintainer: TypeStrong Team
• Awesome TypeScript Loader: Awesome TS loader for Webpack. -- Maintainer: Stanislav Panferov
• Coffee Loader: Coffee loader module for Webpack. -- Maintainer: Webpack Team
• Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer: ShakaCode Team
• PostHTML Loader: PostHTML loader for Webpack. -- Maintainer: PostHTML Team
• ELM Loader: Webpack loader for the Elm programming language. -- Maintainer: Richard Feldman
• Fengari Loader: Run Lua code using Fengari. -- Maintainer: Daurnimator

Utility

• Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team
• ESLint Loader: A ESlint loader for webpack. -- Maintainer: Ricardo Gobbo de Souza
• JSHint Loader: JSHint loader module for Webpack. -- Maintainer: Webpack Team
• JSCS Loader: Run your source through the JSCS style checker. -- Maintainer: Daniel Perez Alvarez
• Bundle Loader: Bundle loader for Webpack. -- Maintainer: Webpack Team
• Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team
• Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway
• Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team
• SourceMap Loader: Extract sourceMappingURL comments from modules. -- Maintainer: Webpack Team
• Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend
• Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao
• Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen
• Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs
• ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf
• Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich
• Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague
• EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge

Testing

• Mocha Loader: Mocha loader module for Webpack. -- Maintainer: Webpack Team
• Karma Webpack: Use Karma with Webpack. -- Maintainer: Webpack Team
• Istanbul Webpack plugin: Use Istanbul instrumenter for the whole pack. -- Maintainer: Hagai Cohen

Back to top

Integration Libraries

• Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer: Matthew Steele
• Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer: Eric Clemmons
• SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer: Guy Bedford
• Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer: Kyle Robinson Young
• Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer: Andy Wermke
• Webpacker - Offical webpack gem for integration into ruby on rails projects. -- Maintainer: Rails
• WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer: Frank Wallis
• Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer: Marlon Maxwel

Back to top

Webpack Plugins

• Extract Text Plugin: Extract text from bundle into a file. -- Maintainer: Webpack Team
• DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer: Webpack Team
• Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer: Webpack Team
• Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer: Arthur Stolyar
• Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer: Johannes Ewald
• HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer: Jan Nicklas
• Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer: Len Boyette
• Split By Path: Split By Path Webpack Plugin. -- Maintainer: Bohdan Tkachenko
• SW Precache - Generates a service worker to precache bundle. -- Maintainer: Will Farley
• CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer: PatrickJS
• Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin
• Module Mapping - Maps modules onto different files. -- Maintainer: Spartez Team
• Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer: Elastic Coders
• Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer: Chris Fritz
• Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer: Mark Dalgleish
• SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer: Jeremy Tice (TodayTix)
• Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer: Gregory Benner
• Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer: Gajus Kuizinas
• Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer: Thomas Sileghem
• Generate package.json Plugin - Limit dependencies in a deployment package.json to only those that are actually being used by your bundle. -- Maintainer: Paul Myburgh
• Progressive Web App Manifest - PWA manifest manager and generator. -- Maintainer: Arthur A. Bergamaschi
• Friendly errors - Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them. -- Maintainer: Geoffroy Warin
• FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer: Gregory Nowakowski
• Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer: Darren Scerri
• PurgeCSS Webpack Plugin - A plugin to remove unused css with purgecss -- Maintainer: Floriel Fedry
• Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer: Aaron Ackerman
• webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer: Adam Dierkens
• Public Path Manipulation Plugin - control publicPath of dynamically loaded resources at runtime -- Maintainer: Andrew Goldis
• Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer: Rocco Cataldo
• CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer: Dominik Weber
• Extension Reloader - Hot reloading while developing browser extensions -- Maintainer: Rubens P. G. Cavalcante
• Htmls Webpack Plugin: Simple and fast multiple-htmls-generating plugin for webpack. -- Maintainer: Zack Young
• Mini css extract plugin: Lightweight CSS extraction plugin -- Maintainer: Webpack Contrib
• build-hash-webpack-plugin For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- Maintainer: Réda Housni Alaoui
• webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon
• Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer Lilian Saget-Lethias
• Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer Lilian Saget-Lethias
• Shell Script Webpack Plugin - A plugin for running arbitrary shell scripts when compiler hooks are triggered. -- Maintainer Drew Loomer
• Stylelint Webpack Plugin: A Stylelint plugin for webpack. -- Maintainer: Ricardo Gobbo de Souza
• ESLint Webpack Plugin: A ESLint plugin for webpack . -- Maintainer: Ricardo Gobbo de Souza

Back to top

Webpack Tools

• Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team
• Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team
• Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen
• NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons
• Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team
• Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds
• Angular2 Webpack Toolkit - Webpack tools and helpers for Angular 2. -- Maintainer: AngularClass
• Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin
• HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg
• Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs
• Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman
• Webpack Chain: A chaining API to generate and simplify the mod. of Webpack 2 configurations. -- Maintainer: Eli Perelman
• Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer: Stephen Cook
• packtracker.io - Webpack bundle analysis on every commit, report webpack stats to every pull request.
• BundleStats - Generates bundle report(sizes, assets, modules) and compares the results between different builds. -- Maintainer: Vio
• Webpack Landing Generator: Easy way to create landing page that converts. -- Maintainer: Aliaksei Kuncevic

Back to top

Research & Training

Articles

• Aniketh Saha | 16-Oct-19 - Creating a Custom webpack Plugin
• Antoine Caron | 18-Jan-19 - Webpack : an unexpected journey
• Andrew Welch | 23-Oct-18 - An Annotated webpack 4 Config for Frontend Web Development
• Gábor Soós | 24-Apr-17 - How to do proper tree-shaking in Webpack 2
• Mark Erikson | 07-Mar-17 - Declaratively Rendering Earth in 3D, Building a Cesium + React App with Webpack
• Joseph Zimmerman | 2-Feb-17 - A Detailed Introduction To Webpack.
• Jamund Ferguson | 22-Jul-16 - Manually Tuning Webpack Builds.
• Sean T. Larkin | 21-Jul-16 - Learn and Debug webpack with Chrome Dev Tools!.
• Raja Rao DV | 10-Apr-16 - Webpack  —  The Confusing Parts.
• Andrew Ray | 09-Apr-16 - Webpack: When To Use and Why.
• Jonathan Creamer | 25-Feb-16 - WebPack Code splitting with ES6 and Babel 6.
• Grgur Grisogono | 15-Feb-16 - Webpack 2 Tree Shaking Configuration.
• Ilya Zayats | 07-Feb-16 - How to split your apps by routes with Webpack.
• Sebastian De Deyne | 04-Feb-16 - Adventure Time With Webpack.
• Jonathan Creamer | 10-Jan-16 - Advanced WebPack Part 2 - Code Splitting.
• Andy Ccs | 02-Jan-16 - Webpack and Docker for Development and Deployment.
• Jonathan Creamer | 08-Jun-16 - Advanced WebPack Part 3 - Creating a custom notifier plugin.
• Nader Dabit | 07-Sept-15 - Beginner’s guide to Webpack.
• Jonathan Creamer | 02-Sept-15 - Advanced WebPack Part 1 - The CommonsChunk Plugin.
• Maxime Fabre | 16-Oct-15 - Webpack your bags.

Videos

• Sean Larkin JS Kongress | Apr-2-2019 - Everything’s a plugin: Understanding webpack from the inside out
• Colt Steele via Youtube| Mar-7-2019 - Learn Webpack Course
• Naomi A. Jacobs via BuzzJS 2.0 2017 | Feb-27-2017 - Webpack: It's Not Magic
• Jack Franklin at HalfStack2016 | 18-Nov-16 | Seamless client side JavaScript w/ Webpack
• Emil Oberg via YouTube | Nov-4-2016 - Introduction to Webpack 2, what is it?
• Emil Oberg via YouTube | Nov-4-2016 - Webpack 2 - A full tutorial
• Sean Larkin NEJS Conf | 30-Sep-16 | Webpack: Core Concepts
• Front End Center Webpack from First Principles | 22-Aug-16 - Intro to Webpack
• Sean Larkin on AngularAir | 03-Aug-16 - ngAir 75 - Webpack 2 with Sean Larkin.
• Eric Clemmons chat with Kent C. Dodds | 01-Jul-16 - Webpack HMR.
• Mirko Nasato (5 Part Series) | 07-Jun-16 - Angular2 with Webpack Project Setup.
• Jonathan Creamer at Nodevember | 05-Dec-15 - Advanced WebPack.
• Kyle Robinson Young | 08-Jul-15 - Getting Started with Webpack.
• Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15 - Webpack.
• Jeremy Lund at Mountain West JS | 28-Mar-15 - Gift Wrap Your Code with Webpack.

Courses

• Webpack for Everyone - Free Laracasts series by Jeffrey Way
• Webpack 4 Fundamentals - Brief introduction about Webpack fundamentals by Sean Larkin
• Web Performance with Webpack - Solving common web performace problems using Webpack by Sean Larkin
• Intro to webpack (playlist) - Egghead.io playlist of a few videos by Kent C. Dodds (the first is free).
• Angular and Webpack for modular applications - Egghead.io course by Kent C. Dodds
• Using Webpack for Production JavaScript Applications - Egghead.io course by Kent C. Dodds (advanced)
• Webpack Fundamentals - Joe Eames for Pluralsight (intermediate)
• Webpack Academy - A comprehensive webpack learning resource.
• Webpack workshops - Collection of courses to learn webpack from novice to advanced levels by Antoine Caron

Books

• SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.

Webpack Examples

• Webpack Examples: Examples of common Webpack functionality.

Community Examples

Angular

• Angular2 Webpack Starter - A Webpack driven Angular 2 Starter kit from AngularClass.
• Angular2 Webpack - A complete, yet simple, starter for Angular 2 using Webpack from Preboot.
• Angular2 Webpack Visual Studio - ASP.NET Core, Angular2 with Webpack and Visual Studio from Damien Bod.
• Angular2 Starter - Angular2 starter kit with Typescript and Webpack from Brian Schemp.
• Angular2 SPA - Angular 2 ASP.NET Core Spa from Steve Sanderson.
• Angular2 Seed - A simple starter demonstrating the basic concepts of Angular2 from Pawel Kozlowski.

Framework Agnostic

• Annotated webpack 4 Config - This is the companion github repo for the An Annotated webpack 4 Config for Frontend Web Development article.
• ES6 TodoMVC with Webpack - Repo used to teach webpack. (Check branches). from Kent C. Dodds.

React

• Create React App - Create React apps with no build configuration from Dan Abramov.
• React Starter Kit - Isomorphic web app boilerplate from Kriasoft Team.
• React Redux Universal - A starter boilerplate for a universal webapp from Erik Rasmussen.
• Frontend Boilerplate - A boilerplate of things that mostly shouldn't exist from TJ Holowaychuk.
• ReactGo - Your One-Stop solution for a full-stack universal Redux from Ken Ding.
• React Native Calculator - Mobile, desktop and website Apps with the same code from Benoit Vallon.
• React Cordova Boilerplate - TodoMVC example for React with Cordova from Yuval Saraf.
• React Universally - A starter kit giving you the minimum for a production ready universal react application.
• Budgeting Application - A fully functional boilerplate application optimized for dev and prod, including PRPL from Modus Create.
• Razzle Material-UI Styled Example - With Styled Components using Express with compression from Erik Engi.
• React Typescript Starter - A React + TypeScript + Webpack 4 + React-Router 4 + Redux + React-Redux + Redux-Thunk + PostCSS + Bootstrap 4 boilerplate.

Other

• Juho, Johannes, Tobias & Sean on JavaScript Air - JavaScript Air podcast
• Webpack interview questions - Interview questions with answers.
• Visual config tool for webpack - A visual tool for creating webpack configs in your browser

Back to top