The complete and regularly updated list of the best resources to learn Webpack

Contents

Webpack Ecosystem

Support Webpack

Documentation

Community

Twitter

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
  • Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki
  • 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
  • mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso
  • wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas
  • Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc.
  • Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski

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
  • ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer: Severin Friede
  • Markup-inline Loader Inline SVGs to HTML -- Maintainer: Zhicheng Wang
  • Polymer Loader - Loader for Polymer elements. -- Maintainers: Rob Dodson - Chad Killingsworth - Bryan Coulter

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
  • TypeScript Loader: 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
  • JSHint Loader: JSHint loader module for Webpack. -- Maintainer: Webpack Team
  • JSCS Loader: Run your source through the JSCS style checker. -- Maintainer: Daniel Perez Alvarez
  • Bundle Loader: Bundle loader for Webpack. -- Maintainer: Webpack Team
  • Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team
  • Resolve URL 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: Mike Vercoelen
  • Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs
  • ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf

Testing

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

Integration Libraries

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

Webpack Plugins

Webpack Tools

  • Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team
  • Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team
  • Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen
  • NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons
  • Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team
  • 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: AngularClass
  • Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin
  • HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg
  • Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs
  • Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman
  • Webpack Chain: A chaining API to generate and simplify the mod. of Webpack 2 configurations. -- Maintainer: Eli Perelman

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

Help your friends learn Webpack. Go share!

I'm really pleased with the service you guys are providing.
Alex Melehy
Alex Melehy
Woodpecker, USA
I most likely will not use another company.
Kevin Allen
Kevin Allen
Namaste Fit Club, USA
Absolute expert. I 100% recommend.
Sonia Baibou
Sonia Baibou
ElleCode, France
One of the best engineers we've worked with.
Andrew Reedy
Andrew Reedy
Reachify, USA
I’m blown away. We need to clone him!
Ryan McClure
Ryan McClure
Reachify, USA
Thank you!!! You're so responsive.
Eric Masella
Eric Masella
Let's Play Nice, USA
We need more people like you!
Adil Virani
Adil Virani
Solomid, USA
A phenomenal programmer. Extremely respectful of my time.
Taylor Raboin
Taylor Raboin
Tay.is, USA
A unicorn who understands startups, design, mobile, and marketing.
Carl Carpenter
Carl Carpenter
Talksho, USA
An excellent front-end developer. Works using scrum methodology.
Federico Dibenedetto
Federico Dibenedetto
Wisboo, Argentina
Finished the job well ahead of schedule.
Giorgio Murru
Giorgio Murru
GM, France
Never lets me down, always exceeds my expectations.
Samuel Vicente
Samuel Vicente
ArtibleCity
Aim to be the best developer in the world? Join Us!