What is Webpack?
There are two types of ways that code is transformed in Webpack and these processes are handled by separate entities: loaders and plugins.
Different loaders can handle different tasks in the transformation process. The babel-loader, for example, takes in ES2015 (or later) code and transpiles the code to an earlier version of JS syntax.
While loaders create modules, plugins alter the modules to optimize them for computer processing, dependency injection, debugging, and other tasks. The UglifyJS plugin, for example, minifies code in order to make it run faster.
When all dependencies have been added to the graph and all processes have been run, the static file is handed off to the browser to load.
Webpack can be configured with whichever loaders and plugins a project needs, though there’s also an ‘out-of-the-box’ option for React developers. React, a popular library for building JS front end, has community support for Webpack. The package, Create React App, can be used to generate files for a new React application preconfigured with Webpack. The Webpack-enabled functionality, including hot reloading (which adds, removes, or updates modules, without a page needing to fully reload) make it especially handy.
Other module bundlers exist (Browserify is considered the first of its kind), but Webpack has become an industry favorite.