The popular Webpack module bundler has undergone a massive update for the release of version 5. Webpack 5 offers massive performance improvements, more dynamic scalability, and basic backward compatibility.

Webpack 5 takes over from version 4, where backward compatibility wasn't always possible with many of the various loaders available, which were often more compatible with version 2, which meant that a developer would often encounter deprecation warnings in the command line if version 2 wasn't used. Webpack 5 has now addressed this issue.

Another big selling point of version 5 is federated modules. We will discuss this in more detail in a later Chapter 6, Production, Integration, and Federated Modules. However, to sum it up, federated modules are essentially a way for a bundled application to utilize and interact with modules and assets in remotely stored separate bundles.

The advantages of Webpack 5 are summarized as follows:

• Webpack 5 offers control over HTTP requests, which improves speed and performance, and also alleviates security concerns.
• Webpack 5 has some advantages over rival bundlers such as Browserify and systemjs—namely, speed. The build time directly depends on the configuration but it's faster than its nearest rivals.
• Little or no configuration is required to use Webpack 5, but you always have it as an option.
• It can be more complicated to use than alternatives, but this is mainly due to its versatility and scope and it is well worth overcoming.
• Webpack 5 has optimization plugins that remove unused code fantastically well. It also has many related features, such as tree shaking, which we will discuss in more detail later in this book.
• It is more flexible than Browserify, allowing the user to select more entry points and use different types of assets. It's also better, when it comes to speed and flexibility, for bundling large web applications and for single-page web applications.

Webpack is now considered an incredibly important tool for application development and web development, transforming the structure and optimizing the loading time for all of your web assets, such as HTML, JS, CSS, and images. Let's now get to grips with using Webpack practically. To do that, the first thing we will look at that may be new to you—if you have, perhaps, only worked with Vanilla JavaScript up to now—is modes.