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

> This README reflects Webpack v2.x and v3.x. The Webpack v1.x [documentation can be found here](https://webpack.github.io/docs/?utm_source=github&utm_medium=readme&utm_campaign=top). 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/).

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|Description| |:--:|:----:|:----------| |[common-chunks-webpack-plugin][common]|![common-npm]|Generates chunks of common modules shared between entry points and splits them into separate bundles (e.g vendor.bundle.js && app.bundle.js)| |[extract-text-webpack-plugin][extract]|![extract-npm]|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)| |[compression-webpack-plugin][compression]|![compression-npm]|Prepare compressed versions of assets to serve them with Content-Encoding| |[i18n-webpack-plugin][i18n]|![i18n-npm]|Adds i18n support to your bundles| |[html-webpack-plugin][html-plugin]|![html-plugin-npm]| Simplifies creation of HTML files (`index.html`) to serve your bundles| [common]: https://github.com/webpack/webpack/blob/master/lib/optimize/CommonsChunkPlugin.js [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 [component]: https://github.com/webpack/component-webpack-plugin [component-npm]: https://img.shields.io/npm/v/component-webpack-plugin.svg [compression]: https://github.com/webpack/compression-webpack-plugin [compression-npm]: https://img.shields.io/npm/v/compression-webpack-plugin.svg [i18n]: https://github.com/webpack/i18n-webpack-plugin [i18n-npm]: https://img.shields.io/npm/v/i18n-webpack-plugin.svg [html-plugin]: https://github.com/ampedandwired/html-webpack-plugin [html-plugin-npm]: https://img.shields.io/npm/v/html-webpack-plugin.svg ### [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|Description| |:--:|:----:|:----------| |[raw-loader][raw]|![raw-npm]|Loads raw content of a file (utf-8)| |[val-loader][val]|![val-npm]|Executes code as module and consider exports as JS code| |[url-loader][url]|![url-npm]|Works like the file loader, but can return a Data Url if the file is smaller than a limit| |[file-loader][file]|![file-npm]|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 [val]: https://github.com/webpack/val-loader [val-npm]: https://img.shields.io/npm/v/val-loader.svg [url]: https://github.com/webpack/url-loader [url-npm]: https://img.shields.io/npm/v/url-loader.svg [file]: https://github.com/webpack/file-loader [file-npm]: https://img.shields.io/npm/v/file-loader.svg #### JSON |Name|Status|Description| |:--:|:----:|:----------| ||![json-npm]|Loads a JSON file (included by default)| ||![json5-npm]|Loads and transpiles a JSON 5 file| ||![cson-npm]|Loads and transpiles a CSON file| [json-npm]: https://img.shields.io/npm/v/json-loader.svg [json5-npm]: https://img.shields.io/npm/v/json5-loader.svg [cson-npm]: https://img.shields.io/npm/v/cson-loader.svg #### Transpiling |Name|Status|Description| |:--:|:----:|:----------| |`