awesome-webpack

by webpack-contrib

webpack-contrib / awesome-webpack

A curated list of awesome Webpack resources, libraries and tools

4.2K Stars 335 Forks Last release: Not found Creative Commons Zero v1.0 Universal 177 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

awesome-webpack

webpack is a module bundler.

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

Awesome Webpack Awesome Build Status

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

Inspired by the awesome list. Feel free to improve this list by contributing! <!--lint disable list-item-indent-->

Contents

Webpack Ecosystem

    Remember to Cast your vote for upcoming Webpack features!

Support Webpack

Documentation

Community

Twitter

People passionate about Webpack (In no particular order)

Back to top

Libraries

Loaders

File Type

  • File Loader: File loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • URL Loader: URL loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • HTML Loader: HTML loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • Raw Loader: Raw file loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • Image Loader: Image minimizing loader for webpack. -- Maintainer:
    Andy VanWagoner
    Github Twitter
  • 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
  • json5 Loader: json5 loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • json Loader: json loader module for Webpack. -- Maintainer:
    Webpack Team
    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
  • C/C++ Loader: Load native C/C++ files with minimal bundle bloat. -- Maintainer:
    Scott Lott
    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
  • Awesome TypeScript Loader: Awesome TS loader for Webpack. -- Maintainer:
    Stanislav Panferov
    Github Twitter
  • 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
  • ESLint Loader: A ESlint loader for webpack. -- Maintainer:
    Ricardo Gobbo de Souza
    Github
  • JSHint Loader: JSHint loader module for Webpack. -- Maintainer:
    Webpack Team
    Github
  • JSCS Loader: Run your source through the JSCS style checker. -- Maintainer:
    Daniel Perez Alvarez
    Github
  • Bundle Loader: Bundle loader for Webpack. -- Maintainer:
    Webpack Team
    Github
  • 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

Testing

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

Back to top

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 - Offical 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

Back to top

Webpack Plugins

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

Back to top

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
  • Webpack Chain: A chaining API to generate and simplify the mod. of Webpack 2 configurations. -- 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

Back to top

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

Other

Back to top

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.