webpack is a module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.
A curated list of awesome Webpack resources, libraries, tools and applications
Contents
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
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.
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:
.graphqldocument 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 class=”mega” 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
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
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.jsonto 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 - Fork TS Checker Webpack Plugin – Webpack plugin that runs typescript type checker on a separate process. — Maintainer:
TypeStrong Team - 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
publicPathof 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 - Webpack Shell Plugin Next: A plugin allows you to run any shell commands before or after webpack builds. — Maintainer:
Kuzmin Pavel - Gettext Webpack Plugin: Embed localization into your bundle using gettext. — Maintainer:
Juan Luis Paz
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 - Webpack Dev Server Firewall: Prevents access to dev server from unknown IPs. — Maintainer:
Igor Adamenko
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.
- Hridayesh Sharma | 18-Aug-20 – Webpack Setup for a JavaScript Library
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 performance 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
- Webpack from scratch series on YouTube by Paris Nakita Kejser
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.
- Read – A highly scalable react boilerplate from logustra
Vue
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
![Photo of [Book] Bootstrap Related Tools and Skills](https://learnpracticeandshare.com/wp-content/uploads/2021/04/Bootstrap-Related-Tools-and-Skills-390x220.jpg)