Introduction

What is Webpack? Quickly stated, it's an open source module bundler for modern Javascript applications. Invented and maintained by Tobias Koppers in 2012 and currently working its way towards version 5. It has a well funded core development team a large open source community. It's also the backbone of every framework's javascript bundling solution including Ruby on Rails, React, Angular, Vue JS and others.

Why is Webpack so popular even 5 years later with no sign of being eclipsed? Well, Webpack asks the question, can we treat all frontend assets, like a Javascript dependency. If we can, that let us require any kind of file in our Javascript.

Web accomplishes this with Loaders. You can think of loaders as making webpack aware of new kinds of syntax, like CSS, with a loader, webpack sees CSS as just another javascript dependency, so we can keep our components and their assets together, at last.

Plugins are part of every open-source framework these days. They allow developers to write additional functionality into Webpack. From squashing to splitting, to hashing for caching, the Webpack community has built a lot of new functionality around the Webpack platform. There's a lot to discover.

Let's go through a typical Webpack compilation.

Webpack receives a configuration object. It reads the path to the entry point, if none exists, it uses src/index.js This is the file we start with. Then Webpack starts looking for require and import statements. The output, the final destination, and the mode. This tells webpack, what environment we're in, development or production mode.

Webpack implements Node's require or import syntax on the browser, something that browsers don't do yet natively. If it's got module rules, for a kind of file, it'll use that loader to wrap the file's contents in something webpack can understand, namely javascript. So it will act just like javascript.

Now you can treat any front end asset JS, CSS and Images, Fonts, etc, like they're all part of a grand dependency graph. Webpack then orders the graph, and numbers the modules. So code and assets everyone needs get bundled first.

Webpack also extends several features of Javascript's next generation. By implementing the dynamic import function, we can include new code on demand and really fine tune our page loads.

Once Webpack has built the graph and figured out the order, Webpack then optimizes the code for the environment. In development, webpack uses express middleware to reload your code in realtime refreshing it in the browser. In production mode, webpack optimizes for speed and size, stripping out dead code and mangling and minifying it for deployment. Many optimization features are available to get it right for your project.

Now Webpack uses the path set in the output, or in none exists, defaults to dist/ and outputs the frontend assets. Depending on how we wire it up, it resolves all file names automatically. So img link and script tags all point where they're supposed to.

We'll look at configuring webpack in a few ways. With a simple HTML file, using Express and Server-side rendering. And with using Hot Module Reloading for a great development experience.