Webpack

Packaging an app with webpack

In the beginning, preparing JavaScript for the browser was simple. You would simply put your page’s functionality in a single script and load it with a <script> tag. Then jQuery took off, and your script had a dependency. No problem: jQuery + app = two <script> tags. But then other libraries came around, which depended in turn on other libraries. Using Backbone.js meant you had to load it after Underscore.js. As more app functionality moved into the browser, the once simple act of loading code in the right order became a challenge. And what about concatenating and minifying scripts for performance? What about loading “below-the-fold” scripts asynchronously? What about development mode?

Only a few years ago, bespoke in-house tools were the norm for addressing these problems. But now, at last, there’s a Swiss army knife for building JavaScript: webpack (always lowercase). Raw scripts go into webpack and compiled, concatenated, minified bundles come out. With a little bit of configuration (and unfortunately, sometimes a lot), webpack can generate any bundle you can imagine.

In this section, you’re going to harness the power of webpack to build a small demo app for the carousel component.

• To get started, open the test-driven-carousel ...