Webpack From Zero

Earlier this week I announced my next web devinar, Understanding Webpack, which will be two weeks from today. So I'm going to spend the next two weeks covering webpack. For those of you who were enjoying the coding videos, I'll probably return to that at some point, but we're back to written emails for at least the next two weeks :)

Webpack works by managing a dependency graph. Different from a task runner like Grunt or Gulp, Webpack understands and manages the relationships between files in your front-end build environment. This something of a double-edged sword. There's an advantage to keeping all of your assets under Webpack's control because it will better manage their interdependencies. But this of course leads to additional complexity. It's a tradeoff, and I'll talk more about how to gauge that tradeoff in a later email.

We'll start today with the four main concepts in play when you're working with Webpack. Those are entry, output, loaders, and plugins. Every webpack config is composed of these elements. Just having a clear understanding of these four terms can go a long way to demystifying the tool.

Entry: This is the starting point of your dependency graph. By default this is src/index.js. Webpack looks here and determines which modules this file depends on, then which modules those modules depend on, and so on until it can go no further. We'll discuss what exactly constitutes a module in a later email, but for now you can just think of them as files.

Output: This is perhaps self-explanatory, but output is the directory where any generated files, known as bundles, are placed.

Loaders: This is where the bulk of your work gets done. Loaders are a series of functions that take the modules in your dependency graph, and transform them in some way. In your config, you provide each loader with rules for which modules it should apply to.

Plugins: Plugins, as distinct from loaders, are not confined to the dependency graph. Plugins allow you add additional functionality to your build that doesn't directly map to a module in the graph. For instance, a very common plugin is the HtmlWebpackPlugin. This allows you to copy an HTML file into your output directory and inject your generated bundles as <script> tags.

Tomorrow, we'll talk about what a bundle really is.

Next Up:
What's a Webpack bundle, and why should you care?

Previously:
Live Video: Write Test Debug, Day 3