Webpack 5 new features in a brief

SafeValue must use [property]=binding: A month ago, the new webpack 5 was released. Here is the list of the changes and improvements of this famous library.
  • The implementation of the opt-in file system cache by module bundler, which is leading to faster builds. Excellent ability to speed up your development builds and improve your productivity.
  • The unique webpack 5 ability to remove code inside of modules makes the bundle size tiny. Want to learn more?
  • Long term cashing, which is based on the concept of keeping the cash validation if the changes made to your code don't change the collapsed version
  • Using http(s) imports as module externals to help with the development of micro frontends. Want to learn more?
  • Dropping support for Node.JS versions older than 10.13.0 aimed to simplify code and remove backdoors to support these older versions.
  • The new configuration options for experiments with support for WebAssembly, Async Web Assembly, Top Level Await, and converting your bundle as a module.
  • The implementation of the module federation allows multiple webpack builds to work together and dynamically load code from another application, which is very important for micro-frontend architecture. Want to learn more?
(see http://g.co/ng/security#xss)
Critical changes
SafeValue must use [property]=binding:
  • Cancellation of all items marked as deprecated in version 4.
  • Different arguments are accepted by built-in plugins IgnorePlugin and BannerPlugin. Want to learn more?
  • Cancellation of the polyfills for native NodeJS libraries like crypto led to the need to use frontend-focused libraries or install the polyfills yourself.
Phew! To squeeze a big press release into a grandma's telegram is not easy. We hope we succeeded. So, what do you have to do next? Should you upgrade now? Definitely, you should decide on your own. Look at your project and clarify does all plugins you're using are supported by the new webpack5. If you are a Next.JS supporter, you may upgrade to webpack 5 by setting the version as a yarn resolution in your package.json but be careful with your config. You should check it manually on webpack 5 compliance. (see http://g.co/ng/security#xss)
In conclusion
SafeValue must use [property]=binding: Despite a bit of inconvenience of checking the custom configuration, you are gaining faster, reliable, and advanced webpack 5 instead of the previous version. You should agree that it is worth spending a little time changing your configuration to get a better and faster build system. (see http://g.co/ng/security#xss)