Webpack module bundler

It's finally time to set up our fully-featured development environment. You'll probably be wondering what Webpack is and what's it got to do with a development environment. Or perhaps, you are familiar with tools such as gulp or grunt and are wondering how Webpack is different from them.

If you have used gulp or grunt before, they are task runners. They execute a specific set of tasks to compile, transform, and minify your code. There is also a tool called Browserify, which lets you use require() in browsers. Usually, a development environment with gulp/grunt involves executing various commands using different sets of tools, such as Babel, Browserify, and so on, in a specific order to generate our desired output code. But Webpack is different. Unlike task runners, Webpack doesn't run a set of commands to build the code. Instead, it acts as a module bundler.

Webpack goes through your JavaScript code and looks for import, require, and so on to find files dependent on it. Then, it loads the files into a dependency graph and, in turn, finds those files, dependencies. This process goes on until there are no more dependencies. Finally, it bundles the dependency files together with the initial file into a single file using the dependency graph it built. This functionality is very useful in modern JavaScript development, where everything is written as a module: