DxCx/awesome-webpack

A curated list of awesome Webpack resources, libraries and tools

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!

Table of 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

Documentation

• Webpack 1.x - Webpack 1.x Documentation
• Webpack 2.x - Webpack 2.x Documentation ( Under development )

Community

• Webpack StackOverflow
• Webpack Medium
• Webpack Gitter Chat

Twitter

People passionate about Webpack ( In no particular order )

• Sean T. Larkin - @TheLarkInn
• Juho Vepsäläinen - @bebraw
• Eric Clemmons - @ericclemmons
• Patrick Stapleton - @gdi2290
• Kent C. Dodds - @kentcdodds
• Johannes Ewald - @Jhnnns
• Kyle Robinson Young - @shamakry
• Joshua Wiens - @d3viant0ne
• Jonathan Creamer - @jcreamer898
• Jan Nicklas - @jantimon

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

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

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

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

Utility

• Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team
• ESLint Loader: ESLint loader for Webpack. -- Maintainer: Maxime Thirouin
• StyleLint Loader: A Webpack Loader for linting SASS, SCSS & CSS. -- Maintainer: Adrian Hall
• JSHint Loader: JSHint loader module for Webpack. -- Maintainer: Webpack Team
• JSCS Loader: Run your source through the JSCS style checker. -- Maintainer: Daniel Perez Alvarez
• JSHint Loader: JSHint loader module for Webpack. -- Maintainer: Webpack Team
• Bundle Loader: Bundle loader for Webpack. -- Maintainer: Webpack Team
• Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team
• JSCS 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 - Generates an iconfont from SVG dependencies. -- Maintainer: Tom Grooffer
• Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs

Testing

• Mocha Loader: Mocha loader module for Webpack. -- Maintainer: Webpack Team
• Karma Webpack: Use Karma with Webpack. -- Maintainer: Webpack Team

Back to top

### Integration Libraries - [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - Webpack simplified in a fluent API with presets. -- *Maintainer*: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons) - [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - Webpack bundling for SystemJS. -- *Maintainer*: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford) - [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - Run webpack through a stream interface. -- *Maintainer*: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)

Back to top

### Webpack Plugins - [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin): Extract text from bundle into a file. -- *Maintainer*: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): Prepare assets to serve with Content-Encoding. -- *Maintainer*: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Offline Plugin](https://github.com/NekR/offline-plugin): Offline plugin (ServiceWorker, AppCache) for Webpack. -- *Maintainer*: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar) - [Rewire Plugin](https://github.com/jhnns/rewire-webpack): Dependency injection for Webpack bundles. -- *Maintainer*: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns) - [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): Simplifies creation of HTML files. -- *Maintainer*: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon) - [Copy Webpack Plugin](https://github.com/kevlened/copy-webpack-plugin): Copy files and directories in webpack. -- *Maintainer*: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened) - [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): Split By Path Webpack Plugin. -- *Maintainer*: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko) - [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - Generates a service worker to precache bundle. -- *Maintainer*: `Will Farley` [![Github][githubicon]](https://github.com/goldhand) - [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS as a webpack plugin. -- *Maintainer*: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290)

Back to top

### Webpack Tools - [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): Middleware which arguments a live bundle. -- *Maintainer*: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): Serves a webpack app. Updates the browser on changes. -- *Maintainer*: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Webpack Merge](https://github.com/survivejs/webpack-merge) - Merge designed for Webpack. -- *Maintainer*: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw) - [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Automatically install & save deps with Webpack. -- *Maintainer*: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons) - [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - Validates your webpack config with Joi. -- *Maintainer*: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools) - [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - Util. to make your webpack config easier to read. -- *Maintainer*: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds) - [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - Webpack tools and helpers for Angular 2. -- *Maintainer*: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass) - [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): Helpers/presets for setting up webpack with hotloading. -- *Maintainer*: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg)

Back to top

>

Research & Training

Articles

• 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.
• 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.
• Andrew Ray | 09-Apr-16 - Webpack: When To Use and Why.

Videos

• Front End Center — Webpack from First Principles - 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

• 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)

Books

• SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers development, production, 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

• 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.
• React Webpack Node - 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.

Other

• Juho, Johannes, Tobias & Sean on JavaScript Air - JavaScript Air podcast

Back to top