🐛🔨 The Contributors Guide to webpack — Part 1 🎨 🖼

A(n) (eco)system overview

The Contributors Guide to webpack is a multi-part publication series outlining the many ways that you can learn about, and contribute to the webpack open source project. You can read the first article in the series here!

A(n) (eco)system overview

First off, if you’ve gotten this far down the article, 👏 congratulations 👏! Jumping into an unfamiliar codebase (or any for that matter) for the first time can be scary. Plus, if it’s your first time contributing to open source, it can even be scarier!

But, we at webpack believe:

• Any (even non-technical) individual should feel welcome to contribute.
• However you decide to contribute, it should be fun and enjoyable for you!
• Even after your first commit, you will walk away understanding more about webpack or JavaScript.
• Consequently, you could become a better developer, writer, designer, etc. along the way, and we are committed to helping foster this growth.

So with that in mind, let’s start off by learning about all of the supporting packages and repositories in the webpack organization.

A(n) (eco)system overview

If you stopped by our GitHub organization page, you’ll find that there are many different repositories to explore. Here is a list of relevant ones and how they tie together with webpack and the ecosystem:

However you decide to contribute, it should be fun and enjoyable for you!

• webpack: The core repository. This is where a majority of the webpack source code lives.
• webpack-dev-middleware: The NodeJs library-agnostic middleware client designed to allow webpack to deliver bundled assets to any development server. This library is the foundational component of webpack-dev-server.
• webpack-dev-server: A lightweight Express implementation of webpack-dev-middleware with a nice Command Line Utility for ease of use.
• memory-fs: A fully functioning in-memory alternative to NodeJs’s native fs. Perfect for implementing in-memory caching and fast data processing instead of writing/reading from disk.
• enhanced-resolve: this package was isolated from the webpack source to be used a general purpose extensible resolver. All of webpack’s module resolution strategy (which is an extension of NodeJs’s native strategy) exists inside of enhanced-resolve.
• tapable: Tapable is a small (~235 line) JavaScript plugin library. It is the backbone of webpack’s extensibility and is the magic behind webpack’s flexibility and modular design. It is very similar to NodeJs’s EventEmitter .
• webpack-sources: webpack-sources is an Object-Oriented modeling for mutating and representing file sources and source maps. It is a small but important piece of webpack.
• source-list-map: As mentioned above webpack-sources not only models a files source code, but also its transformed code and the source maps for it. The source mapping functionality is obtained from this package. A very simple API that you could leverage yourself in your own projects.
• watchpack: This package is an abstraction on chokidar (TIL means ‘watchman’ in hindi) which handles all file watching for webpack.
• loader-runner: Does exactly what it says! Run’s loaders you use in your configuration. The loader functionality in webpack can be used in any other tool you want via this package.
• loader-utils: Contains a wonderful collection of utilities and convenience functions for tasks (like normalizing URL paths, etc) to make custom loader development easy and consistent.
• node-libs-browser: A collection of native NodeJS shims and built-ins (like tls, crypto, etc.) that allow for NodeJS specific modules to work in the browser. This is used directly in webpack core to support bundling those types of modules.
• webpack.js.org: Our new documentation page!!!! The creation of webpack 2 was more than just about new features and getting it released from beta. It was about a new learning experience tailored to first-time and veteran users alike.
• webpack-canary: A library (work in progress) inspired by NodeJs’s Canary in the Gold Mine (CITGM). The goal of this tool is to pull down the top 100 loaders and plugins and NPM modules that use webpack, and run their tests off of nightly or pre-release builds of webpack. This is to help us catch edge-case bugs that we have less coverage or exposure to when making plugin and loader API changes.
• webpack-cli: The “newest kid on the block”. `webpack-cli` is a project led by our webpack contributor-team and
  Even Stensberg
  . Their first complete milestone hasn’t yet been decided, but there are a few things they want to solve: Scaffolding, codemod’s for graceful migrations from v1-v2-vx, and an api to help build extensible plugins or add-ons.
• Core loaders and plugins: a set of loaders and plugins that we have procured for the community’s satisfaction. Includes (but not limited to): css-loader, style-loader, html-loader, file-loader, url-loader, worker-loader, raw-loader, extract-text-webpack-plugin.

Cause every blog post needs stock math-on-chalkboard photos

What now?

You might be saying “Sean I loved this post and now I want to know where I can start!”

Pick a repository that interests and excites you the most, and just explore!

Read the source, explore the existing documentation (if any), take a look at previous PR’s that were merged, review existing issues, verify if any of them are fixed or still an issue, clone the repo, run the tests, add new tests locally, play with the api, annotate the source code, take what you have learned and create docs PR’s and issues for README updates, and most importantly HAVE FUN!

This is just the first installment of our webpack contributors guide and I have more to share in the coming days. For now, take time to check out some of the links above and don’t hesitate to reach me on twitter if you have any questions!!!

No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by donating to our open collective. Open Collective not only helps support the Core Team, but also supports all contributors who have spent significant time improving our organization on their free time! ❤