Payload has a Webpack (v5) bundler that you can build the Admin panel with. For now, we recommended using it because it is stable. If you are feeling a bit more adventurous you can give the Vite bundler a shot.

Out of the box, the Webpack bundler supports common functionalities such as SCSS and Typescript, but there are many cases where you may need to add support for additional functionalities.

Installation

1yarn add @payloadcms/bundler-webpack

Import the bundler

1// payload.config.ts
2
3import { buildConfig } from 'payload/config'
4import { webpackBundler } from '@payloadcms/bundler-webpack'
5
6export default buildConfig({
8  admin: {
9    bundler: webpackBundler()
10  },
12})

Extending Webpack

If you need to extend the Webpack config, you can do so by passing a function to the admin.webpack property on your Payload config. The function will receive the Webpack config as an argument and should return the modified config.

1// payload.config.ts
2
3import { buildConfig } from 'payload/config'
4import { webpackBundler } from '@payloadcms/bundler-webpack'
5
6export default buildConfig({
7  admin: {
8    bundler: webpackBundler()
10    webpack: (config) => {
11      // full control of the Webpack config
12
13      return config
14    },
16  },
17})

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.

Webpack

Installation

Import the bundler

Extending Webpack

Vite

On this page