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
- Research & Training
Remember to Cast your vote for upcoming Webpack features!
- Webpack Open Collective - Help support the teams ongoing development efforts.
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.
- 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.
- File Loader: File loader module for Webpack. -- Maintainer:
- URL Loader: URL loader module for Webpack. -- Maintainer:
- HTML Loader: HTML loader module for Webpack. -- Maintainer:
- Raw Loader: Raw file loader module for Webpack. -- Maintainer:
- Image Loader: Image minimizing loader for webpack. -- Maintainer:
- Responsive Loader: Loader for responsive images. -- Maintainer:
- SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer:
- json5 Loader: json5 loader module for Webpack. -- Maintainer:
- json Loader: json loader module for Webpack. -- Maintainer:
- mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer:
- wasm loader: wasm binary loader module for Webpack. -- Maintainer:
- Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer:
- Bin Exec Loader: Pipe any file through any binary. -- Maintainer:
- GraphQL Loader:
.graphqldocument loader. -- Maintainer:
- C/C++ Loader: Load native C/C++ files with minimal bundle bloat. -- Maintainer:
Component & Template
- Angular2 Template Loader: Inlines html and style's in Angular2 components. -- Maintainer:
- Handlebars Loader: A handlebars template loader for Webpack. -- Maintainer:
- Vue Loader: Webpack loader for Vue.js components. -- Maintainer:
- SVG React Loader - Webpack SVG to React Component Loader. -- Maintainer:
- Underscore Loader - Underscore and Lodash template loader. -- Maintainer:
- ngTemplate Loader - Angular1 Template Loader. -- Maintainer:
- ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer:
- Markup-inline Loader Inline SVGs to HTML -- Maintainer:
- Polymer Loader - Loader for Polymer elements. -- Maintainers:
- Tag Loader - Loader for Riot tag files. -- Maintainer:
- Twig Loader - Twig template loader. -- Maintainer:
- Style Loader: Style loader module for Webpack. -- Maintainer:
- PostCSS Loader: PostCSS loader for Webpack. -- Maintainer:
- CSS Loader: CSS loader module for Webpack. -- Maintainer:
- SASS Loader: SASS loader for Webpack. -- Maintainer:
- Less Loader: Less loader module for Webpack. -- Maintainer:
- Stylus Loader: A stylus loader for webpack. -- Maintainer:
Kyle Robinson Young
- Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer:
- Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer:
- SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer:
Language & Framework
- TS Loader: TypeScript loader for webpack. -- Maintainer:
- Awesome TypeScript Loader: Awesome TS loader for Webpack. -- Maintainer:
- Coffee Loader: Coffee loader module for Webpack. -- Maintainer:
- Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer:
- PostHTML Loader: PostHTML loader for Webpack. -- Maintainer:
- ELM Loader: Webpack loader for the Elm programming language. -- Maintainer:
- Fengari Loader: Run Lua code using Fengari. -- Maintainer:
- Babel Loader: Webpack plugin for Babel. -- Maintainer:
- ESLint Loader: ESLint loader for Webpack. -- Maintainer:
- JSHint Loader: JSHint loader module for Webpack. -- Maintainer:
- JSCS Loader: Run your source through the JSCS style checker. -- Maintainer:
Daniel Perez Alvarez
- Bundle Loader: Bundle loader for Webpack. -- Maintainer:
- Worker Loader: Worker loader module for Webpack. -- Maintainer:
- Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer:
- Import Loader: Imports loader module for Webpack. -- Maintainer:
- SourceMap Loader: Extract sourceMappingURL comments from modules. -- Maintainer:
- Combine Loader - Converts a loaders array into a single loader string. -- Maintainer:
- Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer:
Forrest R. Zhao
- Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer:
- Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer:
- ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer:
- Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer:
- Shell Loader - Run an arbitrary shell script on source files. -- Maintainer:
- Mocha Loader: Mocha loader module for Webpack. -- Maintainer:
- Karma Webpack: Use Karma with Webpack. -- Maintainer:
- Istanbul Webpack plugin: Use Istanbul instrumenter for the whole pack. -- Maintainer:
- Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer:
- Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer:
- SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer:
- Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer:
Kyle Robinson Young
- Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer:
- Webpacker - Offical webpack gem for integration into ruby on rails projects. -- Maintainer:
- WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer:
- Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer:
- Extract Text Plugin: Extract text from bundle into a file. -- Maintainer:
- DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer:
- Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer:
- Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer:
- Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer:
- HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer:
- Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer:
- Split By Path: Split By Path Webpack Plugin. -- Maintainer:
- SW Precache - Generates a service worker to precache bundle. -- Maintainer:
- CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer:
- Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer:
- Module Mapping - Maps modules onto different files. -- Maintainer:
- Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer:
- Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer:
- Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer:
- SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer:
- Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer:
- Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer:
- Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer:
- Generate package.json Plugin - Limit dependencies in a deployment
package.jsonto only those that are actually being used by your bundle. -- Maintainer:
- 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:
- FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer:
- Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer:
- PurgeCSS Webpack Plugin - A plugin to remove unused css with purgecss -- Maintainer:
- Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer:
- webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer:
- Public Path Manipulation Plugin - control
publicPathof dynamically loaded resources at runtime -- Maintainer:
- Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer:
- CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer:
- 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:
- Mini css extract plugin:
Lightweight CSS extraction plugin -- Maintainer:
- 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:
- Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer
- Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer
- Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer:
- Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer:
- Webpack Merge - Merge designed for Webpack. -- Maintainer:
- NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer:
- Webpack Validator - Validates your webpack config with Joi. -- Maintainer:
- 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:
- Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer:
- HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer:
- Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer:
- Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer:
- Webpack Chain: A chaining API to generate and simplify the mod. of Webpack 2 configurations. -- Maintainer:
- Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer:
- 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:
Research & Training
- 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.
- 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
- 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.
- 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
- 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
- SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.
- Webpack Examples: Examples of common Webpack functionality.
- 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.
- 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.
- 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.
- Webpack interview questions - Interview questions with answers.
- Visual config tool for webpack - A visual tool for creating webpack configs in your browser