Webpack Workshop | Unpack a Webpack knowledge bundle

A large software project often consists of a multitude of small open source packages. How come? Most daily programming problems have already been solved by someone else online, so why reinvent the wheel each time? Incorporating open source code shortens development times and also reduces costs. The problem is that not every package follows the same package standard and therefore cannot be easily integrated into every application. Webpack irons out these differences, so that in the end optimized application packages are created that only need to be integrated in the browser.

Since 2015, JavaScript has shipped with the uniform ECMAScript module standard. So why use Webpack today? Over the years Webpack has developed into a universal build pipeline. Every build tool can be integrated via plugins and so-called loaders. You write your styles in Sass? Then use the sass-loader (which by the way was also co-developed by us). You prefer writing TypeScript? That sounds like a task for the ts-loader.

But the biggest strength of Webpack is that it can split the application code into smaller sub-packages and preload these sub-packages intelligently, so that in the end only the code that is currently needed is loaded. This feature is called Code Splitting and is the key to a high-performance website and thus a good ranking in search engines. For this reason Webpack is an integral part of the build pipeline of large Internet companies such as Twitter, Airbnb and Shopify.

If you are using React, Vue or Angular, it is very likely that you are already using Webpack without knowing it. The official command line tools of these frameworks all use webpack behind the scenes. But to be honest: for most standard use cases a deeper knowledge of Webpack is not necessary for the time being. But if you are working on a software product whose build pipeline rely entirely on Webpack, it can give you a decisive competitive advantage if you and your developers know and understand the inner workings of Webpack.

This was the case, for example, for the German store system Shopware. In order to make the admin interface of the store owners fast and performant, we showed the developers on site all the optimization potentials of their build tool in a practical hands-on workshop - and as a small, nice side effect we accelerated the build step by 40 seconds.

This workshop is offered by Johannes Ewald. Johannes is not only Peerigon co-founder, but also a founding member of the Webpack team. Since 2012 he has been actively involved in the Webpack community and has co-developed several loaders and plugins. This is one of the reasons why he is often invited to international conferences and workshops to share his expertise on this topic.