Webpack is a static bundler for JavaScript-based applications.

Your JavaScript application may have multiple files, along with dependencies specified using ES2015 import statements (https://developer.mozilla.Org/en-US/docs/Web/JavaScript/Reference/Statements/import), using CommonJS modules that use require statements (http://www.commonjs.Org/specs/modules/1.0/), or using Asynchronous Module Definition (AMD) (https://github.com/amdjs/amdjs-api/blob/master/AMD.md). Webpack takes care of bundling multiple files with dependencies into one or more resource files.

Webpack consists of a config file that one can be configured to specify the entry point of the app and output directory. It uses loaders to pre-process files in different formats into a common bundle, and uses plugins to do asset management, environment variable injection, and optimization. In the next section, we will take a look into a sample config file and how each of these can be configured in the webpack config file.