import FeedbackCallout from '/docs/snippets/backend-customization-feedback-cta.md'

Admin panel bundlers#

Strapi's admin panel is a React-based single-page application that encapsulates all the features and installed plugins of a Strapi application. 2 different bundlers can be used with your Strapi 5 application, Vite (the default one) and webpack. Both bundlers can be configured to suit your needs.

Vite#

In Strapi 5, is the default bundler that Strapi uses to build the admin panel. Vite will therefore be used by default when you run the strapi develop command.

To extend the usage of Vite, define a function that extends its configuration inside /src/admin/vite.config:

const { mergeConfig } = require("vite");

module.exports = (config) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        "@": "/src",
      },
    },
  });
};

import { mergeConfig } from "vite";

export default (config) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        "@": "/src",
      },
    },
  });
};

Webpack#

In Strapi 5, the default bundler is Vite. To use as a bundler you will need to pass it as an option to the strapi develop command:

strapi develop --bundler=webpack

If you plan to customize webpack, start from the example file in your project root. Rename:

• webpack.config.example.js → webpack.config.js (JavaScript)
• or webpack.config.example.ts → webpack.config.ts (TypeScript)

Strapi will pick up webpack.config.js or webpack.config.ts automatically when you run strapi develop --bundler=webpack.

To extend webpack v5, define a function that returns a modified config in /src/admin/webpack.config.js or /src/admin/webpack.config.ts:

module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it

  // Perform customizations to webpack config
  config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

  // Important: return the modified config
  return config;
};

export default (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it

  // Perform customizations to webpack config
  config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

  // Important: return the modified config
  return config;
};