68 lines
1.9 KiB
Plaintext
68 lines
1.9 KiB
Plaintext
---
|
|
title: Webpack
|
|
label: Webpack
|
|
order: 80
|
|
desc: The Payload admin panel uses Webpack 5 and supports many common functionalities such as SCSS and Typescript out of the box to give you more freedom.
|
|
keywords: admin, webpack, documentation, Content Management System, cms, headless, javascript, node, react, express
|
|
---
|
|
|
|
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](/docs/admin/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
|
|
|
|
```bash
|
|
yarn add @payloadcms/bundler-webpack
|
|
```
|
|
|
|
#### Import the bundler
|
|
|
|
```ts
|
|
// payload.config.ts
|
|
|
|
import { buildConfig } from 'payload/config'
|
|
import { webpackBundler } from '@payloadcms/bundler-webpack'
|
|
|
|
export default buildConfig({
|
|
// highlight-start
|
|
admin: {
|
|
bundler: webpackBundler()
|
|
},
|
|
// highlight-end
|
|
})
|
|
```
|
|
|
|
### 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.
|
|
|
|
```ts
|
|
// payload.config.ts
|
|
|
|
import { buildConfig } from 'payload/config'
|
|
import { webpackBundler } from '@payloadcms/bundler-webpack'
|
|
|
|
export default buildConfig({
|
|
admin: {
|
|
bundler: webpackBundler()
|
|
// highlight-start
|
|
webpack: (config) => {
|
|
// full control of the Webpack config
|
|
|
|
return config
|
|
},
|
|
// highlight-end
|
|
},
|
|
})
|
|
```
|
|
|
|
<Banner type="success">
|
|
<strong>Tip:</strong>
|
|
<br />
|
|
If changes to your Webpack aliases are not surfacing, they might be
|
|
[cached](https://webpack.js.org/configuration/cache/) in `node_modules/.cache/webpack`. Try
|
|
deleting that folder and restarting your server.
|
|
</Banner>
|