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!