v4 code migration: Updating the webpack configuration

This guide is part of the v4 code migration guide designed to help you migrate the code of a Strapi application from v3.6.x to v4.0.x.

🤓 v3/v4 comparison

In both Strapi v3 and v4, the webpack configuration is customizable.

In Strapi v4, webpack v5 (opens new window) is used, and only ./src/admin/app.js and the files under the ./src/admin/extensions folder are being watched by the webpack dev server (see admin panel customization documentation).

PREREQUISITES

Make sure webpack plugins and loaders are upgraded to the latest version before migrating.

To update the webpack (opens new window) configuration to Strapi v4:

1. Rename the ./src/admin/webpack.config.example.js to ./src/admin/webpack.config.js.
2. Copy the content of ./admin/admin.config.js from the Strapi v3 application to ./src/admin/webpack.config.js.

Example of a webpack configuration file in Strapi v4:

// path: ./src/admin/webpack.config.js

'use strict';

// WARNING: the admin panel now uses webpack 5 to bundle the application.

module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it
  // Perform customizations to webpack configuration
  config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));
  // Important: return the modified configuration
  return config;
};