[![npm][npm]][npm-url] [![node][node]][node-url] [![builds1][builds1]][builds1-url] [![builds2][builds2]][builds2-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 1. [Install](#install) 2. [Introduction](#introduction) 3. [Concepts](#concepts) 4. [Contributing](#contributing) 5. [Support](#support) 6. [Core Team](#core-team) 7. [Sponsoring](#sponsoring) 8. [Premium Partners](#premium-partners) 9. [Other Backers and Sponsors](#other-backers-and-sponsors) 10. [Gold Sponsors](#gold-sponsors) 11. [Silver Sponsors](#silver-sponsors) 12. [Bronze Sponsors](#bronze-sponsors) 13. [Backers](#backers) 14. [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](https://www.2ality.com/2014/09/es6-modules-final.html), [CommonJS](http://wiki.commonjs.org/), and [AMD](https://github.com/amdjs/amdjs-api/wiki/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. ### Get Started Check out webpack's quick [**Get Started**](https://webpack.js.org/guides/getting-started) guide and the [other guides](https://webpack.js.org/guides/). ### Browser Compatibility Webpack supports all browsers that are [ES5-compliant](https://kangax.github.io/compat-table/es5/) (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](https://webpack.js.org/guides/shimming/) before using these expressions.

Concepts

### [Plugins](https://webpack.js.org/plugins/) Webpack has a [rich plugin interface](https://webpack.js.org/plugins/). 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-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 [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](https://webpack.js.org/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](https://webpack.js.org/api/loaders/) using Node.js. Loaders are activated by using `loadername!` prefixes in `require()` statements, or are automatically applied via regex from your webpack configuration. #### Files | Name | Status | Install Size | Description | | :---------------: | :--------: | :----------: | :------------------------------------------------------- | | [val-loader][val] | ![val-npm] | ![val-size] | Executes code as module and considers exports as JS code | [val]: https://github.com/webpack-contrib/val-loader [val-npm]: https://img.shields.io/npm/v/val-loader.svg [val-size]: https://packagephobia.com/badge?p=val-loader #### 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 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ | |

| ![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 | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- | |

| ![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/pug-loader.svg [pug-size]: https://packagephobia.com/badge?p=pug-loader [pug3-npm]: https://img.shields.io/npm/v/@webdiscus/pug-loader.svg [pug3-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 | | :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- | | `

	Stars	Issues	Version	Updated	Created
create-react-app	102,540	2,243	5.0.1	2 years ago	8 years ago
vite	67,279	629	5.4.6	3 days ago	4 years ago
webpack	64,550	255	5.94.0	a month ago	13 years ago

create-react-app vs vite vs webpack

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past