The State of Webpack

Webpack is a module bundler that allows you to write modules that is then compiled to work in browsers. In recent months, many developers in the JavaScript community have been adopting Webpack as the defacto module bundler for their projects. Some prominent projects that use Webpack are Angular’s Angular-CLI and React’s Create-React-App.

Sean Larkin from the Webpack core team gives us an update on the state of Webpack at This.JavaScript.

The Webpack Community

Webpack 2 was released a few months ago. The primary emphasis on the recent release was the documentation. The extensive community involvement with Webpack 2 called for more support for the contributors. These resources can be found at webpack.js.org.

In addition to documentation, the release of Webpack 2 brought about brand revitalization. Previous to this iteration of Webpack, there was no core team or medium. Now, customers and supporters can read about some tips and tricks or partner articles on medium.

Recent Activities in Webpack

Webpack recently joined Open Collective. This gives individuals the opportunity to become stakeholders and shareholders of the product. Since joining, an estimated budget of $83k/year was made through the support of sponsors and backers. With these funds, the webpack team has been able to facilitate a better open source platform.

Webpack has great hopes for the future of the open source community and the tools that will result of such collaboration. Unlike many other platforms, Webpack is not sponsored by a specific company or framework, meaning that the tools created by the community are centered entirely around the needs of the user.

Growth and Scale

Webpack has grown significantly since its commencement, beginning with 500k monthly downloads in April 2016, and presently, with more than 5 million monthly downloads.

Due to the expansion of the community and contributions, a newer and richer Webpack ecosystem now exists. What was once thought of as a black box tool, is currently a product that contains better triage and acceptance of contributions from people in the community.

New repositories added to the organization include Webpack-contrib, Webpack-cli and Webpack-canary.

All loaders and plugins were moved from the initial webpack organization to a separate organizing tool called Webpack-contrib. This repo promotes a common a set of standards across the board that would apply to every loader and plugin.

Although there is already a Webpack-cli, this recent version helps reduce the work and complexity involved with setting up webpack. The purpose of the improvements was to make it easier to migrate through break changes (while still being able to apply best practices), and have quick and easy setups that would allow for customization.

There is also a migration feature for going from Webpack 1 to 2, as well as an entire add-on system so that library authors can have their own stamp of approval. For details, you can visit webpack.webpack.cli

What’s in progress for 2017?

Webpack ranks the most sought after improvements in the community through a voting system (found at webpack.js.org/vote). The top features to look forward to this year are:
-roll-up style hoisting
-better tree shaking
-hard cache Webpack plugin and native implementation
-general typescript integration and support (i.e compilation, speed, etc.)
-Working with different browsers

Webpack has been collaborating with Firefox regarding web assembly integration. The proposal aims to make web assembly a first class module type in webpack. This adjustment would eliminate the worries developers may have about shared memory buffers or compiling to web assembly module.
The two-part step process proposed states that developers should be able to directly import any language capable of compiling web assembly, then pass it through a loader and have it return to the web assembly module, so that it could be used like Javascript.this should allow for the for the adoption of web assembly to sky-rocket as well as increase accessibility to developers that may not be able to use it in the state that it is today. The initial proposal can be found at http://bit.ly/2oubZqF.

If you are interested in using Webpack 2 or becoming a sponsor, visit opencollective.com/webpack.

To keep up to date with what is happening with Webpack or if you have any questions, contact Sean Larkin on Twitter @thelarkinn.

By Trinh Kien & Necoline Hubner

Need JavaScript consulting, mentoring, or training help? Check out our list of services at This Dot Labs.