# 管理面板打包器

> Source: https://strapi.nodejs.cn/cms/admin-panel-customization/bundlers

🌐 Admin panel bundlers

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

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

🌐 Strapi's [admin panel](/cms/admin-panel-customization) 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](#vite) (the default one) and [webpack](#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}

🌐 Vite

在 Strapi 5 中， [Vite](https://vitejs.dev/)  是 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`:

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

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

```ts title="/src/admin/vite.config.ts"

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

:::tip

Strapi 还支持 Vite 配置文件的 `.mts` 文件扩展名（`vite.config.mts`），适用于在其 `package.json` 中使用显式 ESM 模块解析的项目。这很有用，因为 Vite 的 CJS Node API 是 [deprecated since Vite 6](https://v6.vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated) ，并将在未来的版本中被移除。

:::

## Webpack

在 Strapi 5 中，默认的打包工具是 Vite。要使用  [webpack](https://webpack.js.org/)  作为打包工具，你需要将其作为选项传递给 `strapi develop` 命令：

```bash
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`:

```js title="/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;
};
```

```ts title="/src/admin/webpack.config.ts"

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