管理面板打包器

页面摘要： 受支持的 JavaScript 打包器会影响构建与开发流程。

Strapi 的管理面板是一个基于 React 的单页应用，封装了 Strapi 应用的所有功能和已安装插件。Strapi 5 应用可以使用 2 种不同的打包器：Vite（默认）和 webpack。两种打包器都可配置以满足你的需求。

INFO

为简化起见，下文文档提到 strapi develop 命令，但实际上你大概率会使用其别名，根据所选包管理器运行 yarn develop 或 npm run develop。

Vite

在 Strapi 5 中，Vite 是 Strapi 用于构建管理面板的默认打包器。因此，运行 strapi develop 命令时默认会使用 Vite。

要扩展 Vite 的使用方式，请在 /src/admin/vite.config 中定义一个扩展其配置的函数：

JavaScript

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

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

TypeScript

import { mergeConfig } from "vite";

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

TIP

Strapi 也支持将 .mts 文件扩展名用于 Vite 配置文件（vite.config.mts），适用于在其 package.json 中使用显式 ESM 模块解析的项目。这很有用，因为 Vite 的 CJS Node API 自 Vite 6 起已弃用，并将在未来的版本中移除。

Webpack

在 Strapi 5 中，默认打包器是 Vite。要将 webpack 用作打包器，需要将其作为选项传递给 strapi develop 命令：

strapi develop --bundler=webpack

WARNING

如果你计划自定义 webpack，请从项目根目录中的示例文件开始。重命名：

webpack.config.example.js → webpack.config.js（JavaScript）
或 webpack.config.example.ts → webpack.config.ts（TypeScript）

当你运行 strapi develop --bundler=webpack 时，Strapi 会自动读取 webpack.config.js 或 webpack.config.ts。

要扩展 webpack v5，请在 /src/admin/webpack.config.js 或 /src/admin/webpack.config.ts 中定义一个返回修改后的配置的函数：

JavaScript

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;
};

TypeScript

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;
};