[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![builds][builds]][builds-url] [![coverage][cover]][cover-url] [![licenses][licenses]][licenses-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.

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](http://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/get-started/) guide and the [other guides](https://webpack.js.org/guides/). ### Browser Compatibility webpack supports all browsers that are [ES5-compliant](http://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| |[i18n-webpack-plugin][i18n]|![i18n-npm]|![i18n-size]|Adds i18n support to your bundles| |[html-webpack-plugin][html-plugin]|![html-plugin-npm]|![html-plugin-size]| Simplifies creation of HTML files (`index.html`) to serve your bundles| |[extract-text-webpack-plugin][extract]|![extract-npm]|![extract-size]|Extract text from a bundle, or bundles, into a separate file| [common-npm]: https://img.shields.io/npm/v/webpack.svg [extract]: https://github.com/webpack/extract-text-webpack-plugin [extract-npm]: https://img.shields.io/npm/v/extract-text-webpack-plugin.svg [extract-size]: https://packagephobia.now.sh/badge?p=extract-text-webpack-plugin [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.now.sh/badge?p=mini-css-extract-plugin [component]: https://github.com/webpack/component-webpack-plugin [component-npm]: https://img.shields.io/npm/v/component-webpack-plugin.svg [component-size]: https://packagephobia.now.sh/badge?p=component-webpack-plugin [compression]: https://github.com/webpack/compression-webpack-plugin [compression-npm]: https://img.shields.io/npm/v/compression-webpack-plugin.svg [compression-size]: https://packagephobia.now.sh/badge?p=compression-webpack-plugin [i18n]: https://github.com/webpack/i18n-webpack-plugin [i18n-npm]: https://img.shields.io/npm/v/i18n-webpack-plugin.svg [i18n-size]: https://packagephobia.now.sh/badge?p=i18n-webpack-plugin [html-plugin]: https://github.com/ampedandwired/html-webpack-plugin [html-plugin-npm]: https://img.shields.io/npm/v/html-webpack-plugin.svg [html-plugin-size]: https://packagephobia.now.sh/badge?p=html-webpack-plugin ### [Loaders](https://webpack.js.org/loaders/) webpack enables 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| |:--:|:----:|:----------:|:----------| |[raw-loader][raw]|![raw-npm]|![raw-size]|Loads raw content of a file (utf-8)| |[val-loader][val]|![val-npm]|![val-size]|Executes code as module and considers exports as JS code| |[url-loader][url]|![url-npm]|![url-size]|Works like the file loader, but can return a Data Url if the file is smaller than a limit| |[file-loader][file]|![file-npm]|![file-size]|Emits the file into the output folder and returns the (relative) url| [raw]: https://github.com/webpack/raw-loader [raw-npm]: https://img.shields.io/npm/v/raw-loader.svg [raw-size]: https://packagephobia.now.sh/badge?p=raw-loader [val]: https://github.com/webpack/val-loader [val-npm]: https://img.shields.io/npm/v/val-loader.svg [val-size]: https://packagephobia.now.sh/badge?p=val-loader [url]: https://github.com/webpack/url-loader [url-npm]: https://img.shields.io/npm/v/url-loader.svg [url-size]: https://packagephobia.now.sh/badge?p=url-loader [file]: https://github.com/webpack/file-loader [file-npm]: https://img.shields.io/npm/v/file-loader.svg [file-size]: https://packagephobia.now.sh/badge?p=file-loader #### JSON |Name|Status|Install Size|Description| |:--:|:----:|:----------:|:----------| |

|![cson-npm]|![cson-size]|Loads and transpiles a CSON file| [json-npm]: https://img.shields.io/npm/v/json-loader.svg [json-size]: https://packagephobia.now.sh/badge?p=json-loader [json5-npm]: https://img.shields.io/npm/v/json5-loader.svg [json5-size]: https://packagephobia.now.sh/badge?p=json5-loader [cson-npm]: https://img.shields.io/npm/v/cson-loader.svg [cson-size]: https://packagephobia.now.sh/badge?p=cson-loader #### Transpiling |Name|Status|Install Size|Description| |:--:|:----:|:----------:|:----------| |`