Webpack
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
1
yarn add @payloadcms/bundler-webpack
Import the bundler
1
// payload.config.ts
2
3
import { buildConfig } from 'payload/config'
4
import { webpackBundler } from '@payloadcms/bundler-webpack'
5
6
export default buildConfig({
7
admin: {
8
bundler: webpackBundler()
9
},
10
})
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
3
import { buildConfig } from 'payload/config'
4
import { webpackBundler } from '@payloadcms/bundler-webpack'
5
6
export default buildConfig({
7
admin: {
8
bundler: webpackBundler()
9
webpack: (config) => {
10
// full control of the Webpack config
11
12
return config
13
},
14
},
15
})
Next