Migrating from Webpack 4 to Webpack 5 Quiz Quiz

Explore key migration steps, configuration changes, and breaking updates involved when upgrading from Webpack 4 to Webpack 5. This quiz is designed for developers seeking practical knowledge on updating build setups and handling new Webpack 5 features or pitfalls.

1. Module Resolution Changes

   Which of the following configuration options is NO LONGER supported in Webpack 5, requiring adjustments during an upgrade from Webpack 4?

   1. resolve.plugins
   2. resolve.extensions
   3. resolve.alias
   4. resolve.modules

   Explanation: In Webpack 5, the 'resolve.plugins' option has been removed and is no longer supported, requiring users to find alternative solutions for custom resolvers. The other options, such as 'resolve.alias', 'resolve.modules', and 'resolve.extensions', remain valid and functional for managing module resolution. Keeping deprecated configurations may generate errors. Always review the changelog when upgrading for such breaking changes.

2. Asset Modules Upgrade

   While migrating from Webpack 4 to Webpack 5, what is recommended to replace legacy file-loader and url-loader usage?

   1. Switching to loader modules
   2. Implementing custom bundle modules
   3. Using asset modules
   4. Applying chunk modules

   Explanation: Webpack 5 introduces asset modules to handle files like images and fonts, consolidating the functionality of file-loader and url-loader. Chunk modules, loader modules, and bundle modules are not official options or terms for this scenario, making them inaccurate. Migrating to asset modules enables simpler syntax and improved asset handling.

3. Automatic Polyfills Removal

   If your project uses built-in Node.js modules (such as 'crypto') in browser-targeted code, which Webpack 5 change might affect your application compared to Webpack 4?

   1. Webpack 5 strictly requires ES modules syntax
   2. Webpack 5 disables all JavaScript minification by default
   3. Webpack 5 eliminates source maps support
   4. Webpack 5 no longer auto-polyfills Node.js core modules

   Explanation: Starting in Webpack 5, automatic polyfills for core Node.js modules like 'crypto' are removed for browser builds, so developers must manually add fallbacks if necessary. Webpack 5 still supports source maps and JavaScript minification, and it continues to allow both CommonJS and ES modules. Using Node.js APIs in browser targets now requires additional configuration or dependencies.

4. Cache Improvements

   Which new default feature in Webpack 5 aims to significantly speed up build performance compared to Webpack 4?

   1. Persistent disk caching
   2. Mandatory tree shaking
   3. Exclusive Babel transpilation
   4. Code splitting configuration removal

   Explanation: Webpack 5 introduces persistent disk caching by default, allowing faster subsequent builds by storing build data on disk. Although tree shaking is improved, it was already present in Webpack 4 and is not new as a default. Code splitting and Babel transpilation are not exclusive defaults of Webpack, and their configurations remain user-defined. Disk caching reduces rebuild times effectively.

5. Upgrade Path for Deprecated Plugins

   When migrating your build from Webpack 4 to Webpack 5, what should you do if one of your plugins is no longer maintained and incompatible?

   1. Find a supported alternative or update your workflow
   2. Delete the plugin configuration without replacement
   3. Downgrade the entire project back to Webpack 3
   4. Ignore the issue and continue using the old plugin

   Explanation: Since Webpack 5 may introduce breaking changes that render plugins nonfunctional, the best approach is to search for a maintained alternative or modify your process to adapt to the new version. Ignoring the incompatibility could cause build failures, while downgrading or deleting plugins may undermine important functionality. Proactively updating ensures compatibility and a smoother migration.