README

[![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
- Introduction
- Concepts
- Contributing
- Support
- Current project members
  - TSC (Technical Steering Committee)
  - Core Collaborators
- Sponsoring
  - Premium Partners
  - Gold Sponsors
  - Silver Sponsors
  - Bronze Sponsors
  - Backers
- Special Thanks

 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!

- Understanding Webpack - Video 1
- Understanding Webpack - Video 2

 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.

Webpack generates HTML pages and extracts CSS files itself — stable and on by
default since 5.109.0, replacing the deprecated html-webpack-plugin and
mini-css-extract-plugin. Point an entry at an .html file, or set
output.html: true to generate a page for a JavaScript entry (if a rule of your
own already handles .html files, also set experiments.html: true; that
also resolves an ESM import without an extension, such as ./page, to page.html
before page.js). See what that covers for
CSS and
HTML.

|                   Name                    |       Status       |    Install Size     | Description                                                                             |
| :---------------------------------------: | :----------------: | :-----------------: | :-----------------------------------

Top issues

Discussions

Latest release

Patch Changes

- Reduce repeated scans when concatenating imported modules. (by @xiaoxiaojx in 22865)

- Avoid allocating CSS module sets for single-group chunks. (by @xiaoxiaojx in 22866)

- Return the value of every module type loaded with importModule(). (by @alexander-akait in 22869)