Summer 2019 with webpack

My view this summer will be slightly different from the one in the image above, however, I’m super excited because I’ve been selected to work on improving webpack during this summer!

About me

My name is Devid, I’m mastering computer science at the University of Bologna (Italy). I’m a Javascript developer and I’m passionate about technological developments in general.

Here’s Bologna

I made my first open source contribution in 2015 while I was working as a GSoC student for the MIT App Inventor, I still have a great memory of that summer and all the great people I got to know.

When I don’t code, I organize, attend and speak at technical events, I play video games and exercise at the gym.

You can find me on Twitter as @misterdev_ and on Github as @misterdev.

webpack: from zero to GSoC

I’ve used webpack many times in my projects since around 2016. I started learning webpack more in depth and wrote my first configuration last year, when I decided to apply for webpack for the GSoC 2018.

Devid from 2018: “I’ve already been a GSoC student and I worked 2 years in a local startup as a full-stack developer, this is gonna be easy, let’s pick the most difficult proposal…mmh multithreading in webpack? Yeah! I know nothing about webpack internals and multithreading in Javascript, I can definitely do this! Let me fix a typo in the documentation and send my application”

SPOILER: I wasn’t selected

After the summer, inspired by people I really admire for their work (like kentcdodds and sindresorhus), I decided to start contributing to an Open Source project despite not being selected. My top choices were webpack, Node, and Yarn, I chose to go on with webpack.

I spent the first month solving a problem just to find out it was the intended behavior 😅 but I learned a lot about how webpack works. Since then, I’ve tried and documented every single webpack hook (parser, compilation, and compiler), made an Open Collective prompt for webpack-cli, helped with the scaffolding system and the CI. I published my first package on npm and wrote my first medium article.

My contribution to webpack-cli from the beginning of 2019

Fun fact: I’m not able to write “webcam” anymore, my muscle memory writes “webpcam” or directly “webpack”

My work for the summer

This summer I’m going to work on the “Output Reporter”, the purpose of this project is simple: to provide a way to override webpack’s output. Currently is hard to customize the default output, therefore it would be great to have a way to make the creation of custom reporters easier. In webpack, the compilation stats is standardized, outputting large pieces of information and it’s hard to get something out from it all.

What I’m thinking, is that there are currently two ways of overriding webpack’s output: you can use a plugin (e.g. ProgressPlugin, webpackbar, friendly-errors-webpack-plugin) or set the “stats” option to configure which bundle information you want to display (picture below). Of course, you could also write your own plugin but it requires a knowledge of how webpack works internally.

webpack’s bundle information

The “stats” option can only be used for a final output after compilation and you may not find a plugin covering your use case, another solution is needed…

The Output Reporter project is meant to improve the current usefulness of webpack’s output, we want to make it more informative about the current state of the compilation, allowing to comprehend the information given from the compiler, where webpack spends most of the time or where it fails to compile. This is very similar to the ProgressPlugin with the intention to be more CI friendly (avoiding buffered output) and allowing the possibility to throttle noisy hooks to limit the frequency of the output.

From the Google Summer of Code website

My initial proof of concept was to have an EventEmitter inside webpack emitting a set of events like “warning”, “error”, “log”, and “stats” so that anyone could write a custom reporter that listens to these events, formats, and prints the output.

After being selected, I’ve received many great suggestions from @hulkish and @sokra, the initial idea has slightly changed, but it’s way better now!

I’m going to build off the original proposal, creating a webpack plugin that can be configured with one or more custom reporters. Instead of an EventEmitter, I’ll use the tapable interface to emit a set of events, which is a library created by webpack to implement the plugin system.

Summing it up, I’m going to create a new plugin system for reporters, so custom reporters are going to be similar to a classic webpack plugin:

class CustomReporter {
  apply(reporter) {
    // Adds a listener for a specific log: "info"
    reporter.hooks.info.tap("CustomReporter", data => {
      // Formats and prints the output
      console.log("I'M THE REPORTER: ", data);
   });
  }
}

Here’s the discussion on this, feel free to give your feedback on the implementation.

Final Remarks

GSoC 2015 has been a key point in my path as a developer, it improved my English a lot and gave me solid grounds in web development. Furthermore, seeing my commitment being rewarded and completing what I had been selected for, is a great satisfaction, that kind of confidence boost is good for everyone. I’m sure this year will be another great experience…

Do you see that blank space at the top-left corner?

Devid from 2019: “I know a little about video editing, nothing about photography, and my English accent is arguable… let’s make a series of videos covering the summer of a GSoC student for webpack” :)

I use this space at the end to give a very big thanks to Even Stensberg, I’m sure I wouldn’t be here without his precious feedback :) 🔥🔥