Webpack 5 Migration

( source: https://webpack.js.org/ )

Webpack is a static module bundler for modern JavaScript applications and is the core of a project. It is now available with new features which provides great advantages.

Considering the high impact the new version of webpack provides, we decided to upgrade our webpack version from 4.x.x to 5.x.x and we did it
successfully with very effective output.

In case you are new to webpack, you can read about it from here:
webpack document

Advantages of Webpack 5

• Improved performance by leveraging persistent caching and long term caching
• Improved bundle sizes using better Tree Shaking and Code generation
• Improved compatibility with web platforms
• Improved Long Term Caching with better algorithms and defaults
• The clean up of internal structures left in a weird state while implementing features in v4 without introducing any breaking changes
• Preparation for future features by introducing breaking changes now, allowing us to stay on v5 for as long as possible

Impact

We observed two major impacts in our projects post migration to webpack 5.

• Reduced Overall bundle size
  Reduced bundle size proportionate to the performance of the application. The smaller the files size, the faster it will load the application.

Bundle size improvement

• Reduced Build time
  Production build time is reduced by 27.5%, we can see improvement in build time as it is reduced from 4 mins to 2.9 mins (~27%) on Jenkins. Faster build time can make any developer happy and certainly helps us save on time.

Approach to upgrade

First you need to upgrade to the latest webpack 4 with its loader and plugins. Only then continue to upgrade to version 5 of webpack.

Please note, Node version 10.13.0 (LTS) is minimum requirement for webpack-5 but there are some plugins and loaders which required higher node version

like, copy webpack plugin requires node ≥ 12.20.0

• In webapck-5 optimize-css-assets-webpack-plugin is replaced by css-minimizer-webpack-plugin.
• Some of the loaders are deprecated in webpack-5 like url-loader, file-loader and raw-loader. Now we have to migrate on Asset Modules.
• If you are using ejected Create-react-App repo. You can also refer to CRA as they also upgraded to webpack 5.

Common Errors

• copy-webpack-plugin
  error: Not Supported
  If you are using latest version of plugin and node version is not upgrade
• Webfont loader
  error: “this.exec is not a function” error in Webpack 5
  https://github.com/jeerbl/webfonts-loader/pull/122
• PostCssLoader
  error: options has an unknown property ‘plugins’.
  move ‘plugins’ inside postcssOptions
  Issue #8315 · ckeditor/ckeditor5
• error: options has an unknown property ‘ident’.
  property not required now.
• error: options has an unknown property ‘prependData’.
  prependData -> additionalData
• error: configuration.output has an unknown property ‘jsonpFunction’.
  output.jsonpFunction -> output.chunkLoadingGlobal
• Renames: Ref link
  output.hotUpdateFunction -> output.hotUpdateGlobal , output.jsonpFunction -> output.chunkLoadingGlobal , output.chunkCallbackFunction -> output.chunkLoadingGlobal
• Node Pollyfills:
  If you are using something like node.fs: 'empty' replace it with resolve.fallback.fs: false. Ref links:- stackoverflow, Migration guid

• Outdated options in Webpack-5:
  There are many options got outdated in webpack-5. You can refer to the link: Outdated Options
• Clean up configuration:
  You can refer to the link: Cleanup Configuration

References

https://webpack.js.org/migrate/5/
https://webpack.js.org/migrate/5/#update-outdated-options
https://webpack.js.org/migrate/5/#upgrade-webpack-to-5
https://github.com/webpack/webpack.js.org/issues/3940
https://github.com/ckeditor/ckeditor5/issues/8315
https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5
https://github.com/ckeditor/ckeditor5/issues/8315