# @prefresh/webpack

> A webpack plugin to enable fast-refresh for Preact components.

Latest version **4.0.7** (published 2026-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @prefresh/webpack
pnpm add @prefresh/webpack
yarn add @prefresh/webpack
bun add @prefresh/webpack
```

## Health

**Score 68/100 (B)** — status: active.

Positive: has types package; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.7 |
| Published | 2026-08-27 |
| First published | 2020-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/prefresh__webpack) |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 394 |
| Maintainers | jdecroock, marvinhagemeister, developit |

## Links

- npm: https://www.npmjs.com/package/@prefresh/webpack
- Repository: https://github.com/preactjs/prefresh
- Homepage: https://github.com/preactjs/prefresh#readme
- Issues: https://github.com/preactjs/prefresh/issues
- npm.io page: https://npm.io/package/@prefresh/webpack

## Dependencies (2)

- [@prefresh/core](https://npm.io/package/@prefresh/core.md) 1.5.11
- [@prefresh/utils](https://npm.io/package/@prefresh/utils.md) 1.2.1

## Recent versions

- 4.0.7 (latest) — 2026-08-27
- 4.0.6 — 2025-10-24
- 4.0.5 — 2025-08-20
- 4.0.4 — 2025-08-19
- 4.0.3 — 2025-06-28
- 4.0.2 — 2025-03-14
- 4.0.1 — 2024-05-19
- 4.0.0 — 2023-05-09
- 3.3.4 — 2022-06-28
- 3.3.3 — 2022-02-20
- 3.3.2 — 2021-07-07
- 3.3.1 — 2021-07-07
- 3.3.0 — 2021-05-21
- 3.2.3 — 2021-05-11
- 3.2.2 — 2021-04-06
- … 25 more at https://npm.io/package/@prefresh/webpack/versions

## README

# Prefresh-webpack

[![npm version](https://badgen.net/npm/v/@prefresh/webpack)](https://www.npmjs.com/package/@prefresh/webpack)

## Setup

```
npm i -s @prefresh/webpack
## OR
yarn add @prefresh/webpack
```

Then add it to your `webpack` config by doing

```js
import PreactRefreshPlugin from '@prefresh/webpack';

const config = {
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new PreactRefreshPlugin(),
  ],
  devServer: {
    hot: true, // ensure dev-server.hot is on
    ...moreDevServerConfig,
  },
  ...moreWebpackConfig,
};
```

### Using hooks

If you're using `preact/hooks` you'll need something extra to ensure we can handle
changes in hooks well.

You'll need to add `@prefresh/babel-plugin` to your `babel-configuration` to make this
work together.

## Best practices

### Recognition

We need to be able to recognise your components, this means that components should
start with a capital letter and hook should start with `use` followed by a capital letter.
This allows the Babel plugin to effectively recognise these.

Do note that a component as seen below is not named.

```jsx
export default () => {
  return <p>Want to refresh</p>;
};
```

Instead do:

```jsx
const Refresh = () => {
  return <p>Want to refresh</p>;
};

export default Refresh;
```

When you are working with HOC's be sure to lift up the `displayName` so we can
recognise it as a component.

---
_Source: https://npm.io/package/@prefresh/webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._