Webpack
Webpack lies at the core of the modern front end development tool chain. It is described on the Webpack website vaguely as "a module bundler". As we'll learn, Webpack is an extremely powerful set of tools that provide the foundation for our front end development work flow. Rather than trying to explain webpack in a sentence, let's start with a few examples of what Webpack can do:
- Provides a system to use Node JS-style
require statements to tie your files together, similar to Browserify. - Allows bundling many individual javascript files into a single "bundle" for use in a production environment.
- Enables using the latest javascript technologies like ES6 in the browser through the use of Webpack loaders, which serve as interfaces to lower-level tools such as Babel.
- Watches files for changes and rebuilds them automatically.
- Hot module reloading, which enables individual files to be "hot reloaded" into the page without requiring a full refresh.
- Easily create separate development and production configurations.
- Allows you to create "isomorphic" javascript applications -- apps with multiple entry-points.
In many ways, Webpack is a build tool like Grunt or Gulp, though more powerful, evolved, and specific to developing front end javascript apps. While tools like Grunt and Gulp are relatively general purpose Node JS build tools, webpack is a build tool specifically for developing rich front-end apps.
Installing Webpack
Webpack is written in Node JS. Head over to nodejs.org to install the latest version of Node. After doing that, open up your terminal and install Webpack with npm (node package manager):
npm install -g webpack
Note: Depending on your node setup permissions, you may have to run the above command with sudo.
READ THIS: A Brief Note about Webpack
I think it's important for the reader to have as much context as possible when learning a new technology, so that you can set your expectations correctly. There's a good chance you're learning Webpack and React because they're a frequently talked-about set of the newest, hottest, shiniest tools with which to build rich, frontend applications. Whatever your reason for learning these tools, I want you to go in with eyes wide open with a clear conceptual understanding of the landscape.
Webpack is a young, low-level, complex, powerful tool.
As of this writing, the Webpack team is putting the finishing touches on 2.0. So, webpack and the surrounding community is relatively new and not yet fully formed. There aren't many abstractions that make working with webpack easier, or that make re-using common configurations easy. The documentation is a bit scattered, and often not as clear as it could be, but it's a lot better than many open source projects.
Webpack is fairly low-level. At the time of this writing, 99% of working with Webpack means working with it directly, not through some higher-level abstraction or library that handles much of the low-level plumbing. I hope higher-level tools emerge in the near future, but for the time being we're working directly with Webpack and rolling our own configuration for nearly every piece of functionality we want.
Webpack is complex. As you'll learn, much of Webpack's functionality is contained in plugins and loaders which effectively Webpack's plugin interface to manipulate files based on rules you define in your webpack configuration file. For example, we use the babel loader to use the Babel compiler to compile javascript and JSX files.
All of that having been said, Webpack is very, very powerful. My goal with this book is that you can learn to harness it's power to supercharge your frontend development workflow.
Webpack for Next-gen Javascript Development
One of Webpack's most powerful features is it's loaders. To quote from the Webpack documentation:
Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.
Loaders are the nuts and bolts of what makes webpack so powerful. Loaders enable us to use newer versions of Javascript like newer versions of ECMAScript, as well as Javascript supersets like Coffeescript.
Webpack Support
Wepback has a fairly active and helpful support chat room that you can access at https://gitter.im/webpack/webpack.