Appendix A: Webpack for React

Although Webpack is used throughout the book, it never got a comprehensive treatment because all the focus was on React. In this Appendix, you will have the chance to examine Webpack in depth, get a better understanding of how it works and learn more about loaders, plugins, hot module replacement and much more. By the end of this appendix you will be confident to setup your ideal development environment for your React projects with Webpack.

What is Webpack?

Over the years, web development evolved from pages with few assets and little to none JavaScript into full featured web applications with complex JavaScript and big dependency trees (files that depend upon multiple other files).

To help cope with this growing complexity, the community came up with different approaches and practices, such as:

• The usage of modules in JavaScript, allowing us to divide and organize a program into several files.
• JavaScript pre-processors (that allows us to use features today that will be available only in future versions of JavaScript) and compile-to-JavaScript languages (Such as CoffeeScript, for example)

But while immensely helpful, these advances have brought the need for an additional step in the development process: We need to bundle together and transform (transpile / compile) these files into something that the browser can understand. That's where tools such as Webpack are necessary.

Webpack is a module bundler: A tool that can analyze your project's structure, find JavaScript modules and other assets to bundle and pack them for the browser.

How does Webpack compare to build tools such as Grunt and Gulp?

Webpack is different from task runners and build systems such as Grunt and Gulp because it's not a build tool itself, but it can replace them with advantages.

Build tools such as Grunt and Gulp work by looking into a defined path for files that match your configuration. In the configuration file you also specify the tasks and steps that should run to transform, combine and/or minify each of these files.