[![npm][npm]][npm-url] [![node][node]][node-url] [![builds1][builds1]][builds1-url] [![dependency-review][dependency-review]][dependency-review-url] [![coverage][cover]][cover-url] [![PR's welcome][prs]][prs-url] webpack Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also…
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![builds1][builds1]][builds1-url]
[![dependency-review][dependency-review]][dependency-review-url]
[![coverage][cover]][cover-url]

[![PR's welcome][prs]][prs-url]









webpack
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Table of Contents
- [Install](#install)
- [Introduction](#introduction)
- [Concepts](#concepts)
- [Contributing](#contributing)
- [Support](#support)
- [Current project members](#current-project-members)
- [Sponsoring](#sponsoring)
- [Special Thanks](#special-thanks-to)
Install
Install with npm:
bash
npm install --save-dev webpack
Install with yarn:
bash
yarn add webpack --dev
Introduction
Webpack is a bundler for modules. The main purpose is to bundle JavaScript
files for usage in a browser, yet it is also capable of transforming, bundling,
or packaging just about any resource or asset.
TL;DR
- Bundles ES Modules, CommonJS, and AMD modules (even combined).
- Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
- Dependencies are resolved during compilation, reducing the runtime size.
- Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
- Highly modular plugin system to do whatever else your application requires.
Learn about webpack through videos!
Get Started
Check out webpack's quick Get Started guide and the other guides.
Browser Compatibility
Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported).
Webpack also needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.
Concepts
Plugins
Webpack has a rich plugin
interface. Most of the features
within webpack itself use this plugin interface. This makes webpack very
flexible.
| Name | Status | Install Size | Description |
| :---------------------------------------: | :----------------: | :-----------------: | :-------------------------------------------------------------------------------------- |
| [mini-css-extract-plugin][mini-css] | ![mini-css-npm] | ![mini-css-size] | Extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. |
| [compression-webpack-plugin][compression] | ![compression-npm] | ![compression-size] | Prepares compressed versions of assets to serve them with Content-Encoding |
| [html-bundler-webpack-plugin][bundler] | ![bundler-npm] | ![bundler-size] | Renders a template (EJS, Handlebars, Pug) with referenced source asset files into HTML. |
| [html-webpack-plugin][html-plugin] | ![html-plugin-npm] | ![html-plugin-size] | Simplifies creation of HTML files (index.html) to serve your bundles |
| [pug-plugin][pug-plugin] | ![pug-plugin-npm] | ![pug-plugin-size] | Renders Pug files to HTML, extracts JS and CSS from sources specified directly in Pug. |
[common-npm]: https://img.shields.io/npm/v/webpack.svg
[mini-css]: https://github.com/webpack-contrib/mini-css-extract-plugin
[mini-css-npm]: https://img.shields.io/npm/v/mini-css-extract-plugin.svg
[mini-css-size]: https://packagephobia.com/badge?p=mini-css-extract-plugin
[component]: https://github.com/webpack-contrib/component-webpack-plugin
[component-npm]: https://img.shields.io/npm/v/component-webpack-plugin.svg
[component-size]: https://packagephobia.com/badge?p=component-webpack-plugin
[compression]: https://github.com/webpack-contrib/compression-webpack-plugin
[compression-npm]: https://img.shields.io/npm/v/compression-webpack-plugin.svg
[compression-size]: https://packagephobia.com/badge?p=compression-webpack-plugin
[bundler]: https://github.com/webdiscus/html-bundler-webpack-plugin
[bundler-npm]: https://img.shields.io/npm/v/html-bundler-webpack-plugin.svg
[bundler-size]: https://packagephobia.com/badge?p=html-bundler-webpack-plugin
[html-plugin]: https://github.com/jantimon/html-webpack-plugin
[html-plugin-npm]: https://img.shields.io/npm/v/html-webpack-plugin.svg
[html-plugin-size]: https://packagephobia.com/badge?p=html-webpack-plugin
[pug-plugin]: https://github.com/webdiscus/pug-plugin
[pug-plugin-npm]: https://img.shields.io/npm/v/pug-plugin.svg
[pug-plugin-size]: https://packagephobia.com/badge?p=pug-plugin
Loaders
Webpack enables the use of loaders to preprocess files. This allows you to bundle
any static resource way beyond JavaScript. You can easily write your own
loaders using Node.js.
Loaders are activated by using loadername! prefixes in require() statements,
or are automatically applied via regex from your webpack configuration.
JSON
| Name | Status | Install Size | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :----------: | :------------------------------: |
| | ![cson-npm] | ![cson-size] | Loads and transpiles a CSON file |
[cson-npm]: https://img.shields.io/npm/v/cson-loader.svg
[cson-size]: https://packagephobia.com/badge?p=cson-loader
Transpiling
| Name | Status | Install Size | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ |
| | ![babel-npm] | ![babel-size] | Loads ES2015+ code and transpiles to ES5 using Babel |
| | ![type-npm] | ![type-size] | Loads TypeScript like JavaScript |
| | ![coffee-npm] | ![coffee-size] | Loads CoffeeScript like JavaScript |
[babel-npm]: https://img.shields.io/npm/v/babel-loader.svg
[babel-size]: https://packagephobia.com/badge?p=babel-loader
[coffee-npm]: https://img.shields.io/npm/v/coffee-loader.svg
[coffee-size]: https://packagephobia.com/badge?p=coffee-loader
[type-npm]: https://img.shields.io/npm/v/ts-loader.svg
[type-size]: https://packagephobia.com/badge?p=ts-loader
Templating
| Name | Status | Install Size | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- |
| | ![html-npm] | ![html-size] | Exports HTML as string, requires references to static resources |
| | ![pug-npm] | ![pug-size] | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular |
| | ![md-npm] | ![md-size] | Compiles Markdown to HTML |
| | ![posthtml-npm] | ![posthtml-size] | Loads and transforms a HTML file using PostHTML |
| | ![hbs-npm] | ![hbs-size] | Compiles Handlebars to HTML |
[html-npm]: https://img.shields.io/npm/v/html-loader.svg
[html-size]: https://packagephobia.com/badge?p=html-loader
[pug-npm]: https://img.shields.io/npm/v/@webdiscus/pug-loader.svg
[pug-size]: https://packagephobia.com/badge?p=@webdiscus/pug-loader
[jade-npm]: https://img.shields.io/npm/v/jade-loader.svg
[jade-size]: https://packagephobia.com/badge?p=jade-loader
[md-npm]: https://img.shields.io/npm/v/markdown-loader.svg
[md-size]: https://packagephobia.com/badge?p=markdown-loader
[posthtml-npm]: https://img.shields.io/npm/v/posthtml-loader.svg
[posthtml-size]: https://packagephobia.com/badge?p=posthtml-loader
[hbs-npm]: https://img.shields.io/npm/v/handlebars-loader.svg
[hbs-size]: https://packagephobia.com/badge?p=handlebars-loader
Styling
| Name | Status | Install Size | Description |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- |
| `` | ![style-npm] | ![style-size] | Add exports of a module as style to DOM |
| | ![css-npm] | ![css-size] | Loads CSS file with resolved imports and returns CSS code |
| | ![less-npm] | ![less-size] | Loads and compiles a LESS file |
| | ![sass-npm] | ![sass-size] | Loads and compiles a Sass/SCSS file |
| | ![stylus-npm] | ![stylus-size] | Loads and compiles a Stylus file |
| |
…
-
webpack
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.
JavaScript ★ 66k 14m agoExplain → -
webpack-bundle-analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
JavaScript ★ 13k 6d agoExplain → -
webpack-dev-server
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
JavaScript ★ 7.9k 2d agoExplain → -
mini-css-extract-plugin
Lightweight CSS extraction plugin
JavaScript ★ 4.7k 2mo agoExplain → -
css-loader
CSS Loader
JavaScript ★ 4.3k 10d agoExplain → -
sass-loader
Compiles Sass to CSS
JavaScript ★ 3.9k 10d agoExplain → -
tapable
Just a little module for plugins.
JavaScript ★ 3.9k 1d agoExplain → -
copy-webpack-plugin
Copy files and directories with webpack
JavaScript ★ 2.9k 10d agoExplain → -
postcss-loader
PostCSS loader for webpack
JavaScript ★ 2.8k 10d agoExplain → -
webpack-cli
Webpack's Command Line Interface
JavaScript ★ 2.6k 1d agoExplain → -
webpack-dev-middleware
A development middleware for webpack
JavaScript ★ 2.5k 3d agoExplain → -
webpack-hot-middleware
Webpack hot reloading you can attach to your own server
JavaScript ★ 2.4k 29d agoExplain → -
webpack.js.org
Repository for webpack documentation and more!
MDX ★ 2.3k 8h agoExplain → -
react-starter ▣
[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!
JavaScript ★ 2.2k 10y agoExplain → -
minimizer-webpack-plugin
Minimizer Plugin
JavaScript ★ 2.0k 3d agoExplain → -
style-loader
Style Loader
JavaScript ★ 1.7k 7mo agoExplain → -
docs ▣
[OLD] documentation for webpack
JavaScript ★ 1.4k 8y agoExplain → -
compression-webpack-plugin
Prepare compressed versions of assets to serve them with Content-Encoding
JavaScript ★ 1.4k 1mo agoExplain → -
html-loader
HTML Loader
JavaScript ★ 1.2k 10d agoExplain → -
thread-loader
Runs the following loaders in a worker pool
JavaScript ★ 1.1k 11d agoExplain → -
enhanced-resolve
Offers an async require.resolve function. It's highly configurable.
JavaScript ★ 984 57m agoExplain → -
less-loader
Compiles Less to CSS
JavaScript ★ 959 10d agoExplain → -
analyse
analyse web app for webpack stats
JavaScript ★ 891 1y agoExplain → -
memory-fs ▣
[DEPRECATED use memfs instead] A simple in-memory filesystem. Holds data in a javascript object.
JavaScript ★ 878 2y agoExplain → -
webpack-pwa ▣
Example for a super simple PWA with webpack.
JavaScript ★ 807 6y agoExplain → -
loader-utils ▣
utils for webpack loaders
JavaScript ★ 772 2y agoExplain → -
expose-loader
Expose Loader
JavaScript ★ 540 10d agoExplain → -
imports-loader
Imports Loader
JavaScript ★ 517 10d agoExplain → -
stylus-loader
:art: A stylus loader for webpack.
JavaScript ★ 493 10d agoExplain → -
react-webpack-server-side-example ▣
Example of an react application with webpack including server-side rendering.
JavaScript ★ 455 9y agoExplain → -
node-libs-browser ▣
[DEPRECATED] The node core libs for in browser usage.
JavaScript ★ 450 4y agoExplain → -
stylelint-webpack-plugin
A Stylelint plugin for webpack
JavaScript ★ 420 4mo agoExplain → -
watchpack
Wrapper library for directory and file watching.
JavaScript ★ 397 1d agoExplain → -
webpack-with-common-libs ▣
webpack with some common libraries
JavaScript ★ 339 10y agoExplain → -
css-minimizer-webpack-plugin ▣
cssnano plugin for Webpack
JavaScript ★ 323 1mo agoExplain → -
loader-runner
Runs (webpack) loaders
JavaScript ★ 307 1mo agoExplain → -
webpack-sources
Source code handling classes for webpack
JavaScript ★ 273 2d agoExplain → -
eslint-webpack-plugin
A ESLint plugin for webpack
JavaScript ★ 255 2mo agoExplain → -
image-minimizer-webpack-plugin
Webpack loader and plugin to compress images using imagemin
JavaScript ★ 250 10d agoExplain → -
changelog-v5 ▣
Temporary repo for the changelog for webpack 5
★ 250 2y agoExplain → -
schema-utils
Options Validation
JavaScript ★ 249 4mo agoExplain → -
exports-loader
Exports Loader
JavaScript ★ 214 10d agoExplain → -
meeting-notes ▣
Webpack core team meeting notes.
★ 189 7y agoExplain → -
concord ▣
[WIP] concord modules specification
★ 156 6y agoExplain → -
coffee-loader
CoffeeScript Loader
JavaScript ★ 141 10d agoExplain → -
example-app ▣
[OUTDATED] example web app for webpack
JavaScript ★ 137 9y agoExplain → -
fastparse ▣
A very simple and stupid parser, based on a statemachine and regular expressions.
JavaScript ★ 65 7y agoExplain → -
enhanced-require ▣
[CURRENTLY UNMAINTAINED] Enhance the require function in node.js with support for loaders which preprocess files. This is a standalone polyfill for features of webpack.
JavaScript ★ 64 11y agoExplain → -
playground ▣
In-browser playground for webpack
JavaScript ★ 61 7y agoExplain → -
analyse-tool ▣
A tool to analyse your webpack build result. It allows to browse the compilation and points out options to optimize the build.
JavaScript ★ 56 9y agoExplain → -
hot-node-example ▣
Example for HMR in a node.js process
JavaScript ★ 53 11y agoExplain → -
benchmark
Run benchmarks for webpack.
JavaScript ★ 40 1h agoExplain → -
source-list-map ▣
Fast line to line SourceMap generator.
JavaScript ★ 40 7y agoExplain → -
media ▣
No description.
★ 31 10d agoExplain → -
core ▣
[OBSOLETE in webpack 2] The core of webpack and enhanced-require...
JavaScript ★ 26 9y agoExplain → -
tooling
A collection of reusable tooling for webpack repos.
JavaScript ★ 25 3d agoExplain → -
voting-app ▣
An application for casting votes on new webpack features and fixes.
JavaScript ★ 23 3y agoExplain → -
gsoc
google summer of code repository
JavaScript ★ 19 4mo agoExplain → -
remark-loader ▣
Load markdown through remark with image resolving and some react-specific features.
JavaScript ★ 18 4mo agoExplain → -
webpack-doc-kit
No description.
JavaScript ★ 15 16h agoExplain → -
html-minimizer-webpack-plugin ▣
HTML minimizer webpack plugin
JavaScript ★ 15 1mo agoExplain → -
json-minimizer-webpack-plugin ▣
JSON minimizer webpack plugin
JavaScript ★ 14 3mo agoExplain → -
graph ▣
[DEPRECATED] Converts JSON stats from webpack to a nice SVG-Image.
JavaScript ★ 13 13y agoExplain → -
eslint-config-webpack
Webpack standard eslint configuration
JavaScript ★ 12 1d agoExplain → -
docs.webpack.js.org
webpack's new api docs with mintlify
MDX ★ 11 3mo agoExplain → -
webpack.github.com ▣
webpack.github.com
JavaScript ★ 11 1y agoExplain → -
template ▣
[DEPRECATED] Create a new web app from a template.
JavaScript ★ 10 13y agoExplain → -
github-org-overview ▣
Scans all repos of a github organization and check if published
JavaScript ★ 7 10y agoExplain → -
management ▣
Mission, Goals, projects and budget for webpack
★ 6 7y agoExplain → -
the-big-test ▣
[OUTDATED] the big webpack/enhanced-require test
JavaScript ★ 5 12y agoExplain → -
tsc
TSC repository
JavaScript ★ 4 1d agoExplain → -
v4.webpack.js.org ▣
Hosting for old version of webpack documentation
★ 4 4y agoExplain → -
meetup-2018-05-08 ▣
QA for the webpack meetup in Munich
★ 4 8y agoExplain → -
github-wiki ▣
The server-side code (heruko) for serving the wiki as gh-pages.
JavaScript ★ 3 11y agoExplain → -
escope ⑂ ▣
Escope: ECMAScript scope analyzer
JavaScript ★ 3 9y agoExplain → -
.github
No description.
★ 2 2mo agoExplain → -
design-wg ▣
Webpack Design Working Group
★ 2 5mo agoExplain → -
jquery-wpt-module ▣
[DEPRECATED] webpack-template-module for jquery
JavaScript ★ 2 13y agoExplain → -
bootstrap-wpt-module ▣
[DEPRECATED] webpack-template-module for twitter's bootstrap
JavaScript ★ 2 13y agoExplain → -
webpack-tests-example ▣
DEPRECATED (use mocha-loader now): A simple example for doing tests with webpack and mocha.
JavaScript ★ 2 13y agoExplain → -
enhanced-resolve-completion-demo ▣
[OUTDATED] demo for the request completion of enhanced-resolve
JavaScript ★ 2 13y agoExplain → -
security-wg
Webpack Security Working Group
★ 1 5mo agoExplain → -
hackathon
No description.
★ 0 10mo agoExplain → -
governance
The webpack governance model
★ 0 2mo agoExplain → -
performance-wg ▣
Performance Working Group for webpack
★ 0 5mo agoExplain → -
wg-template
Temple for creating Working Groups
★ 0 9mo agoExplain →
No repos match these filters.