Awesome webpack

A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the awesome list. Feel free to improve this list by contributing.

Webpack Ecosystem

Remember to Cast your vote for upcoming Webpack features!

Support Webpack

Community

Twitter

People passionate about Webpack (In no particular order)

Libraries

Loaders

File Type

  • HTML Loader: HTML loader module for Webpack. -- Maintainer: Webpack Team Github
  • Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki Github
  • SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer: Hovhannes Babayan Github
  • mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso Github
  • wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas Github
  • Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc. Github
  • Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski Github
  • GraphQL Loader: .graphql document loader. -- Maintainer: Stephen Wan Github

Component & Template

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

Styles

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

Language & Framework

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

Utility

  • Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team Github Twitter
  • Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team Github
  • Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway Github
  • Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team Github
  • SourceMap Loader: Extract sourceMappingURL comments from modules. -- Maintainer: Webpack Team Github
  • Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend Github
  • Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao Github
  • Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen Github
  • Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs Github
  • ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf Github Twitter
  • Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich Github Twitter
  • Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague Github
  • EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge Github Twitter
  • esbuild Loader - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by esbuild. -- Maintainer: Hiroki Osame Github Twitter

Testing

Integration Libraries

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

Webpack Plugins

Webpack Tools

  • Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team Github
  • Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team Github
  • Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons Github Twitter
  • Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team Github
  • Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - Webpack tools and helpers for Angular 2. -- Maintainer: AngularClass Github Twitter
  • Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github Twitter
  • HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg Github
  • Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs Github
  • Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman Github
  • Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer: Stephen Cook Github
  • 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 Github Twitter
  • Webpack Landing Generator: Easy way to create landing page that converts. -- Maintainer: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: Prevents access to dev server from unknown IPs. -- Maintainer: Igor Adamenko Github Twitter

Research & Training

Articles

Videos

Courses

Books

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

Webpack Examples

Community Examples

Angular

Framework Agnostic

React

Vue

Other

Contributors