Your first time on this page? Allow me to give some explanations.
Awesome webpack
A curated list of awesome Webpack resources, libraries and tools
Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.
Thank you webpack-contrib & contributors
View Topic on GitHub:
webpack-contrib/awesome-webpack
Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.
Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Support Webpack
Help support the teams ongoing development efforts.
Documentation
Community
TPM at Microsoft. Developer Advocate and webpack core team member.
VP of Software Development at HigherEdHQ. Webpack member.
from AngularClass, AngularAir and Angular Universal. Webpack member.
from PayPal Engineering and JavaScript Air. Webpack member.
Technical Lead for EasyMetrics. Webpack member.
Microsoft MVP and Telerik Developer Expert.
Software Engineer at Code Yellow, Webpack core team member.
File Type
File Loader
A loader for webpack which transforms files into base64 URIs
HTML Loader
A loader for webpack that allows importing files as a String
Image minimizing loader for webpack
A webpack loader for responsive images
A webpack loader which loads SVG file as utf-8 encoded DataUrl string.
[Deprecated] JSON5 loader for Webpack (can still be used for webpack 4)
json loader module for webpack - UNMAINTAINED
mermaid loader for webpack
WASM webpack loader
Webpack loader and plugin to compress images using imagemin
Execute any binary as a webpack loader
A webpack loader for .graphql documents
C/C++ to WASM Webpack Loader
Component & Template
Chain-to loader for webpack that inlines all html and style's in angular2 components.
A handlebars template loader for webpack
📦 Webpack loader for Vue.js components
Webpack SVG to React Component Loader
A Underscore and Lodash template loader for Webpack
Include AngularJS templates in the Webpack bundle and preload the template cache.
A simple webpack loader for inlined stylesheets of angular components
a webpack loader to embed svg/MathML to html
WebPack Loader for Polymer Web Components
Riot official webpack loader
Webpack loader for compiling Twig.js templates
Auto require AngularJS 1.x templates in Webpack style
Pug loader module for Webpack
Webpack loader for Nunjucks templates
Styles
Style Loader
PostCSS loader for webpack
CSS Loader
Compiles Sass to CSS
Compiles Less to CSS
A stylus loader for webpack.
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps
A light-weight and fast css minifier for css-in-js
SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.
Language & Framework
TypeScript loader for webpack
Awesome TypeScript loader for webpack
CoffeeScript Loader
Load Bootstrap styles and scripts in your Webpack bundle
PostHTML for Webpack
Webpack loader for the Elm programming language.
Webpack loader for fengari
Utility
📦 Babel loader for webpack
[DEPRECATED] jshint loader for webpack, please migrate on eslint
Run your source through the JSCS style checker.
Bundle Loader
A webpack loader that registers a script as a Web Worker
Webpack loader that resolves relative paths in url() statements based on the original source file
Imports Loader
extract sourceMappingURL comments from modules and offer it to webpack
A webpack loader to convert svgs into font icons in CSS.
Webpack loader for NgModule lazy loading using the angular router
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript
A Webpack loader that runs an arbitrary script on matching files
Extract EXIF- & IPTC-data from your JPGs during build-time.
⚡️ Speed up your Webpack build with esbuild
Converts a loaders array into a single loader string. -- Maintainer: James Friend
![Github][githubicon]
Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen
![Github][githubicon]
Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs
![Github][githubicon]
Testing
Mocha Loader
Karma webpack Middleware
Webpack plugin for Istanbul
Integration Libraries
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Simplified, fluent Webpack API with presets. Describe what your app needs, not how.
Webpack bundling for SystemJS
Run webpack through a stream interface
📦 Configure webpack using functional feature blocks.
Use Webpack to manage app-like JavaScript modules in Rails
Webpack development middleware for ASP.NET 5
A webpack plugin that convert the KV Store Endpoints in environment variables.
Webpack Plugins
[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
Prepare compressed versions of assets to serve them with Content-Encoding
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Dependency injection for webpack bundles
Simplifies creation of HTML files to serve your webpack bundles
Copy files and directories with webpack
Split a Webpack entry bundle by path into any number of arbitrarily defined smaller bundles
Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets. You can optionally pass sw-precache configuration options to webpack through this plugin.
core-js builder as a Webpack Plugin
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
Webpack plugin for mapping modules onto different files
Serverless plugin to bundle your lambdas with Webpack
Prerenders static HTML in a single-page application.
Minimal, unopinionated static site generator powered by webpack
Webpack plugin for loading/extracting SVGs into a sprite file
Plugin to compress images with imagemin
A webpack plugin for prepack.
Get your dependencies from a cdn rather than bundling them in your app
Generates a package.json file containing the external modules used by your webpack bundle
Progressive Web App Manifest Generator for Webpack, with auto icon resizing and fingerprinting support.
Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience.
Copy, move, archive (zip/tar/tar.gz), delete files and directories before and after Webpack builds. Win32/Mac/*Nix supported
Webpack plugin that runs typescript type checker on a separate process.
🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package
Purgecss plugin for webpack
Detect circular dependencies in modules compiled with Webpack
A webpack plugin to dynamically inject code into the bundle.
Webpack plugin that allows to configure path or URL for fetching dynamic imports
A Webpack plugin that generates OS notifications for build steps using node-notifier.
🖖 Webpack plugin to remove unused css and duplicated css rules. Remove unused css in nuxtjs, gatsbyjs and more...
A upgrade from 🔥webpack-chrome-extension-reloader🔥, now on all browsers
A simple, flexible and fast html webpack plugin support multiple htmls
Lightweight CSS extraction plugin
run any shell commands before or after webpack builds (with type definition)
A Webpack plugin that gives you a way to import vendors with dynamic variable and specific code splitting
Enhancement of Webpack DefinePlugin to store defined things in actual variables
A Webpack plugin for running a shell script(s) on any hook provided by Webpack.
A Stylelint plugin for webpack
A ESLint plugin for webpack
Run shell commands either before or after webpack 4 and 5 builds
Embed localization into your webpack's bundle using gettext
Polyfill Node.js core modules in Webpack.
Create global constants which can be configured at compile time. -- Maintainer: Webpack Team
![Github][githubicon]
Webpack Tools
A development middleware for webpack
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
Merge designed for webpack
Speed up development by automatically installing & saving dependencies with Webpack.
Validates your webpack config with Joi
Utilities to help your webpack config be easier to read
Webpack tools and helpers for Angular 2 by @AngularClass
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
Helpers/presets for setting up webpack with hotloading react and ES6(2015) using Babel.
A CLI dashboard for webpack dev server
Create and build modern JavaScript projects with zero initial configuration.
A chaining API to generate and simplify the modification of Webpack configurations.
⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)
Easy way to create landing page that converts #paindreamfix
Prevents access to dev server from unknown IPs
Webpack bundle analysis on every commit, report webpack stats to every pull request.
Articles
Videos
Courses
Free Laracasts series by Jeffrey Way
Brief introduction about Webpack fundamentals by Sean Larkin
Solving common web performace problems using Webpack by Sean Larkin
Egghead.io playlist of a few videos by Kent C. Dodds (the first is free).
Egghead.io course by Kent C. Dodds
Egghead.io course by Kent C. Dodds (advanced)
Joe Eames](https://twitter.com/josepheames) for Pluralsight (intermediate)
Collection of courses to learn webpack from novice to advanced levels by Antoine Caron
on YouTube by Paris Nakita Kejser
Books
Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.
Webpack Examples
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Angular
Angular Starter
A complete, yet simple, starter for Angular v2+ using webpack
Template for ASP.NET Core, Angular with Webpack and Visual Studio
Angular2 starter kit with Typescript and Webpack
[Archived] This repository has been archived
Framework Agnostic
This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
The vanillajs example converted to es6
React
Set up a modern web app by running one command.
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)
Your One-Stop solution for a full-stack universal Redux App!
Mobile, desktop and website Apps with the same code
TodoMVC example for react with development tools to build a cordova application
A starter kit for universal react applications.
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Razzle Material-UI example with Styled Components using Express with compression
React starter with Typescript, Webpack 4, Sass, Redux, Redux thunk
A highly scalable react boilerplate using webpack
Vue
A highly scalable vue boilerplate using webpack
Other
Webpack questions/answers you can use to prepare for interviews or test your knowledge.
JavaScript Air](https://javascriptair.com) podcast
A visual tool for creating webpack configs in your browser