What’s New in Webpack 5

What’s New in Webpack 5

What’s new in Webpack 5. Webpack 5 concentrates on five key areas: Faster builds with persistent caching; Smaller bundle sizes; Better long term caching; Breaking changes now to allow further improvements later; Module Federation

The fifth major webpack release was released yesterday. Almost two years since the last major release (4), this release brings a lot of changes to the most used module bundler in the JavaScript ecosystem. If like me, you started your frontend career prior to the rise of webpack, you remember the pain and frustration of working with tools like gulp and grunt.

Let’s take a look at the breaking changes and the improvements that come with the new release of this incredibly popular library.

What’s new in Webpack 5

This new version concentrates on five key areas.

Faster builds with persistent caching

Slow builds are one of the most common complaints from developers about webpack. The module bundler now offers an opt-in filesystem cache. This should improve our productivity as developers by speeding up our development builds.

Smaller bundle sizes

Improvements have been made to tree shaking (also known as dead code elimination). While previous versions of webpack were able to remove unused code, version 5 takes it even further. webpack is now able to remove code inside of modules, leading to even smaller bundle sizes. To read more about all of the optimization features of webpack 5, check out the official documentation.

Better long term caching

After bundle size, the thing that can improve your app loading time the most is caching. With caching, returning visitors to your application experience an almost instantaneous loading experience. With webpack 5, changes made to your code that don’t change the minimized version (eg, comments or variable names), do not result in cache invalidation. This means that your users will be able to experience the performance improvements of caching for longer.

Breaking changes now to allow further improvements later

Some of the changes introduced in this version will not have any visible impact on your application’s performance today. Instead, they are meant to allow for new features and improvements in later versions of webpack 5.

These future features include using http(s) imports as module externals. This will help with the development of micro frontends. To read more about these new and exciting features, check out the official documentation here.

Another breaking change is bumping the minimum Node.JS version from 6 to 10.13.0. Dropping support for older Node.JS versions will allow the team to simplify their code, and remove workaround to support these older versions.

webpack 5 also brings a new experiments configuration option with support for WebAssembly, Async Web Assembly, Top Level Await, and outputting your bundle as a module (previously only possible with rollup).

Module Federation

This new feature, in short, allows multiple webpack builds to work together. It allows your application to dynamically load code from another application (aka, a different webpack build). The most popular application of module federation is to enable micro-frontend architecture.

Going over module federation in detail is beyond the scope of this article. If you are interested in learning more, be sure to read the official webpack post here.

react webpack programming javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.