A curated list of awesome Webpack resources, libraries, tools and applications
Inspired by the awesome list. Feel free to improve this list by contributing!
- Resources
- Documentation
- Community
- Twitter Follows
- Libraries
- Research & Training
- Articles
- Videos
- Courses
- Webpack Examples
- Community Examples
- Other
>
- Webpack 1.x - Webpack 1.x Documentation
- Webpack 2.x - Webpack 2.x Documentation ( Under development )
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
>
- File Loader: File loader module for Webpack. -- Maintained By:
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
- 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
- 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
- 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
- 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
- Mocha Loader: Mocha loader module for Webpack. -- Maintainer:
Webpack Team
- Karma Webpack: Use Karma with Webpack. -- Maintainer:
Webpack Team
### Integration Libraries - [Terse Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Webpack simplified in a fluent API with presets. -- _Maintainer_: `Eric Clemmons` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/ericclemmons) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/ericclemmons) - [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - Webpack bundling for SystemJS. -- _Maintainer_: `Guy Bedford` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/guybedford) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/guybedford) - [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - Run webpack through a stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/shama) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/shamakry)
### Webpack Plugins - [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin): Extract text from bundle into a file. -- _Maintainer_: `Webpack Team` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/webpack) - [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): Prepare assets to serve with Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/webpack) - [Offline Plugin](https://github.com/NekR/offline-plugin): Offline plugin (ServiceWorker, AppCache) for Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/NekR) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/nekrtemplar) - [Rewire Plugin](https://github.com/jhnns/rewire-webpack): Dependency injection for Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/jhnns) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/Jhnnns) - [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): Simplifies creation of HTML files. -- _Maintainer_: `Charles Blaxland` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/ampedandwired) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/ampedandwired) - [Copy Webpack Plugin](https://github.com/kevlened/copy-webpack-plugin): Copy files and directories in webpack. -- _Maintainer_: `Len Boyette` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/kevlened) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/kevlened)
### Webpack Tools - [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): Middleware which arguments a live bundle. -- _Maintainer_: `Webpack Team` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](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](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/webpack) - [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Automatically install & save deps with Webpack. -- _Maintainer_: `Eric Clemmons` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/ericclemmons) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/ericclemmons) - [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - Validates your webpack config with Joi. -- _Maintainer_: `js-dxtools Team` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](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](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/kentcdodds) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/kentcdodds) - [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - Webpack tools and helpers for Angular 2. -- _Maintainer_: `AngularClass` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/AngularClass) [![Twitter](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg)](https://twitter.com/AngularClass) - [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): Helpers/presets for setting up webpack with hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github](https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg)](https://github.com/HenrikJoreteg)
>
- 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.
- 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.
- 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 Examples: Examples of common Webpack functionality.
- ES6 TodoMVC with Webpack - Repo used to teach webpack. (Check out the branches). -- Maintainer:
Kent C. Dodds
- Angular2 Webpack Starter - A Webpack driven Angular 2 Starter kit from AngularClass.