管理面板打包器

Strapi 的管理面板是一个基于 React 的单页应用，它封装了 Strapi 应用的所有功能和已安装的插件。你的 Strapi 5 应用可以使用 2 个不同的打包器，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.

👀 信息

为简单起见，以下文档提到了 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。

¥In Strapi 5, Vite 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.

要扩展 Vite 的使用，请在 /src/admin/vite.config.[js|ts] 中定义一个扩展其配置的函数：

¥To extend the usage of Vite, define a function that extends its configuration inside /src/admin/vite.config.[js|ts]:

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 命令：

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

strapi develop --bundler=webpack

☑️ Prerequisites

在自定义 webpack 之前，请确保将默认的 webpack.config.example.js 文件重命名为 webpack.config.[js|ts]。

¥Make sure to rename the default webpack.config.example.js file into webpack.config.[js|ts] before customizing webpack.

为了扩展 webpack v5 的使用，在 /src/admin/webpack.config.[js|ts] 内部定义一个扩展其配置的函数：

¥In order to extend the usage of webpack v5, define a function that extends its configuration inside /src/admin/webpack.config.[js|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;
};

Vite​

Webpack​

Vite

Webpack