管理面板打包器

🌐 Admin panel bundlers

Page summary:
支持的 JavaScript 打包工具会影响构建和开发流程。

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

🌐 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.

Info

为了简化，以下文档提到 strapi develop 命令，但实际上你可能会根据所选择的软件包管理器运行 yarn develop 或 npm run develop 来使用它的别名。

🌐 For simplification, the following documentation mentions the strapi develop command, but in practice you will probably use its alias by running either yarn develop or npm run develop depending on your package manager of choice.

快

🌐 Vite

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

为了扩展 Vite 的使用，在 /src/admin/vite.config 内定义一个扩展其配置的函数：

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

JavaScript
TypeScript

/src/admin/vite.config.js
const { mergeConfig } = require("vite");

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

/src/admin/vite.config.ts
import { mergeConfig } from "vite";

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

Webpack

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

strapi develop --bundler=webpack

Prerequisites

如果你打算自定义 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）
或 webpack.config.example.ts → webpack.config.ts（TypeScript）

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

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

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

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

JavaScript
TypeScript

/src/admin/webpack.config.js
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;
};

/src/admin/webpack.config.ts
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;
};

快​

Webpack​

快

Webpack