What’s new in webpack 5?

By w3iscool, March 31, 2023

Webpack is one of the most popular tools for bundling front-end assets. It has been around for a long time and has evolved with the web development ecosystem. In October 2020, webpack 5 was released with many improvements and new features. In this post, we will explore some of the highlights of webpack 5 and how they can benefit your projects.

Improved performance with persistent caching

One of the main goals of webpack 5 was to improve the build performance by leveraging persistent caching. This means that webpack can store some of the intermediate results of the compilation process on disk and reuse them in subsequent builds. This can significantly reduce the build time, especially for large projects with many modules and dependencies.

To enable persistent caching, you need to add a cache option to your webpack configuration file:

module.exports = {
  // ...
  cache: {
    type: 'filesystem', // use filesystem for persistent caching
    buildDependencies: {
      config: [__filename], // include the configuration file as a build dependency
    },
  },
};

The cache option tells webpack to use the filesystem as the cache type and to invalidate the cache when the configuration file changes. You can also customize other aspects of the caching behavior, such as the cache directory, the cache name, or the cache expiration. For more details, see the documentation.

Improved long-term caching with better algorithms and defaults

Another goal of webpack 5 was to improve the long-term caching of the generated bundles by using better algorithms and defaults. Long-term caching refers to the ability of browsers to cache static assets for a long time and reuse them across multiple visits. This can improve the loading performance and user experience of your web applications.

Webpack 5 introduces several changes that can enhance the long-term caching of your bundles:

• It uses deterministic module ids and chunk ids by default, instead of numeric ids that can change between builds. This means that modules and chunks will have consistent ids across builds, unless their content changes.
• It uses a new algorithm for splitting chunks based on module types and sizes. This can result in more balanced and optimized chunks that can be cached independently.
• It supports content hashing for filenames, which appends a hash based on the content of each file to its name. This ensures that browsers will request a new version of a file only when its content changes.

To take advantage of these features, you need to configure your output filenames to include content hashes:

module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].js', // use content hash for main chunks
    chunkFilename: '[name].[contenthash].js', // use content hash for split chunks
  },
};

You can also customize other aspects of the output filenames, such as the length or format of the hashes. For more details, see the documentation.

Cleaner internal structures and compatibility with web platforms

Webpack 5 also made some changes to its internal structures and compatibility with web platforms. These changes may not be visible to users directly, but they can improve the quality and maintainability of webpack itself.

Some of these changes are:

• Webpack 5 uses a new plugin system that applies plugins before the configuration defaults are applied. This allows plugins to have more control over the compilation process and to modify or extend the defaults.
• Webpack 5 moved a large part of its runtime code into runtime modules, which are special modules that contain code for bootstrapping, loading, or executing modules. This makes the runtime code more modular and customizable.
• Webpack 5 supports serialization of its internal data structures, which enables faster communication between processes or threads. This can improve the performance and scalability of webpack in multi-process or multi-threaded environments.
• Webpack 5 improved its compatibility with web platforms by aligning with proposals and specifications that have emerged in recent years. For example, it supports native ECMAScript modules, import maps, asset modules, web workers, etc.

For more details on these changes, see the changelog.

Conclusion

Webpack 5 is a major update that brings many improvements and new features to one of the most popular bundlers for front-end assets. It focuses on enhancing the performance, caching, quality

Vite or Webpack: Which One is Faster and Better for Your Vue Project?