[![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] [![compatibility-score](https://api.dependabot.com/badges/compatibility_score?dependency-name=webpack&package-manager=npm_and_yarn&previous-version=5.72.1&new-version=5.73.0)](https://docs.github.com/en/code-security/dependabot/dependabot-security-updates/about-dependabot-security-updates#about-compatibility-scores) [![downloads](https://img.shields.io/npm/dm/webpack.svg)](https://npmcharts.com/compare/webpack?minimal=true) [![install-size](https://packagephobia.com/badge?p=webpack)](https://packagephobia.com/result?p=webpack) [![backers](https://opencollective.com/webpack/backers/badge.svg)](https://opencollective.com/webpack#backer) [![sponsors](https://opencollective.com/webpack/sponsors/badge.svg)](https://opencollective.com/webpack#sponsors) [![contributors](https://img.shields.io/github/contributors/webpack/webpack.svg)](https://github.com/webpack/webpack/graphs/contributors) [![discussions](https://img.shields.io/github/discussions/webpack/webpack)](https://github.com/webpack/webpack/discussions) [![discord](https://img.shields.io/discord/1180618526436888586?label=discord&logo=discord&logoColor=white&style=flat)](https://discord.gg/5sxFZPdx2k)

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) - [TSC (Technical Steering Committee)](#tsc-technical-steering-committee) - [Core Collaborators](#core-collaborators) - [Sponsoring](#sponsoring) - [Premium Partners](#premium-partners) - [Gold Sponsors](#gold-sponsors) - [Silver Sponsors](#silver-sponsors) - [Bronze Sponsors](#bronze-sponsors) - [Backers](#backers) - [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. #### Learn about webpack through videos! - [Understanding Webpack - Video 1](https://www.youtube.com/watch?v=xj93pvQIsRo) - [Understanding Webpack - Video 2](https://www.youtube.com/watch?v=4tQiJaFzuJ8) ### 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-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](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 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ | | | ![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] | Loads Pug templates and returns a function | | | ![pug3-npm] | ![pug3-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](https://github.com/posthtml/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/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 | | :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- | | `