If you have been following the Google Summer of Code projects, you’ll notice that this year webpack is among the list of organizations participating this year!

We had over 50+ student applications fly in after our announcement and Even Stensberg, Tobias Koppers, and the rest of the webpack team spent weeks working to evaluate them!

Today we’re happy to announce that webpack 4 (Legato) is available today! You can get it via yarn or npm using:

$> yarn add webpack webpack-cli --dev

or

$> npm i webpack webpack-cli --save-dev

🎼 Why Legato?

We wanted to start a new tradition by giving each of our major releases a codename! Therefore, we decided to give this privilege to our largest OpenCollective sponsor: trivago!

So we reached out and here was their response:

[At trivago] we usually give our projects a name with a musical theme. For example, our old JS Framework was called “Harmony”, our new framework is “Melody”. …

Since the beginning of August — when we forked webpack/webpack#master for the next branch — we’ve seen an incredible influx of contributions!

From all of us at webpack: 🎆🎉 Happy New Year! 🎉🎆

Leading up to 2017

One year for us, feels like 300 “JavaScript years”. JavaScript’s ease of use, accessibility, dynamic nature, and distribution platform enables us to witness a new tool, framework, or paradigm to pop up every week or so! We call this the “JavaScript Renaissance”.

To stay relevant and sustainable as a JavaScript open source project, you also have to be easy-to-use, accessible, and share many of the same qualities as JavaScript itself. …

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!

Recap

In Part 1 of this series we learned about the packages that reside within both the webpack and webpack-contrib GitHub organizations! In Part 2, we discovered Tapable , learned that it is a ~230 line library similar to NodeJs’s EventEmitter , and found that it powers the entire [webpack] plugin system.

In addition to this, we learned how webpack creates tapable instances (Classes that extend Tapable ) and how [webpack] plugins register to them and execute their functionality. Finally, we learned about each tapable instance that exists in webpack and what their purpose is. …

With webpack becoming the tool of choice for many companies across the world, its success and that of the companies that rely on it are intertwined. Ensuring the future of webpack is a no brainer for everyone who benefits from it.

Over the past two years we have collaborated with engineers at trivago as webpack is vital to their technology stack. Today we are thrilled to announce trivago as the newest sponsor to the webpack open source project.

trivago’s business mission is clear: be the traveler’s first and independent source of information for finding the ideal hotel at the lowest rate. …

One of the signature features of webpack is its use of the “dependency graph” to manage and bundle assets.

However, every resource that is loaded into webpack must be treated as JavaScript (this includes css, images, svgs, html, etc.). Because of this, only JavaScript is a first-class module type in webpack. The downsides of this are that assets like CSS, HTML, cannot be lazy-loaded with their own special runtimes. Rather, we have had to make hackier-than-not solutions (like extract-text-webpack-plugin) to support these kinds of limitations.

WebAssembly

At webpack, we would like to shift our focus to supporting more module types. One of these module types we would like to treat as a first-class citizen is WebAssembly. …

A few weeks ago I announced that I was leaving my job to go work at Microsoft. I soon realized that I would leaving behind a lot of work for my team at Mutual of Omaha.

As a maintainer of webpack, I knew had really pushed the build tool to its limits. Through advanced webpack techniques, our team was able to re-architect MutualOfOmaha.com into a multipage app that was at the same time a Progressive Web App.

But who was going to take this over this complex implementation when I was gone? I had handled a majority of our webpack setup and configuration. …