---
title: "Webpack Integration · Unlighthouse"
meta:
  "og:description": "Add Lighthouse auditing to webpack-based projects with development server integration and HMR support."
  "og:title": "Webpack Integration · Unlighthouse"
  description: "Add Lighthouse auditing to webpack-based projects with development server integration and HMR support."
---

**Integrations**

# **Webpack Integration**

[Copy for LLMs](https://unlighthouse.dev/integrations/webpack.md)

**Deprecated**: This integration will be removed in v1.0. Use [**CLI**](https://unlighthouse.dev/integrations/cli) or [**CI**](https://unlighthouse.dev/integrations/ci) instead. See [**deprecation notice**](https://unlighthouse.dev/integration-deprecations).

Lighthouse auditing for webpack-based applications during development.

## [Install](#install)

```
yarn add -D @unlighthouse/webpack
```

```
npm install -D @unlighthouse/webpack
```

```
pnpm add -D @unlighthouse/webpack
```

### [Git ignore reports](#git-ignore-reports)

Unlighthouse will save your reports in `outputDir` (`.unlighthouse` by default), it's recommended you .gitignore these files.

```
.unlighthouse
```

## [Usage](#usage)

To begin using Unlighthouse, you'll need to add extend your webpack configuration.

When you run your webpack app, it will give you the URL of client, only once you visit the client will Unlighthouse start.

### [webpack.config.js example](#webpackconfigjs-example)

```
import Unlighthouse from '@unlighthouse/webpack'

export default {
  // ...
  plugins: [
    Unlighthouse({
      // config
    }),
  ],
}
```

### [CJS example](#cjs-example)

```
const Unlighthouse = require('@unlighthouse/webpack')

export default {
  // ...
  plugins: [
    Unlighthouse({
      // config
    }),
  ],
}
```

## [Configuration](#configuration)

You can either configure Unlighthouse via the plugin, or you can provide a [**config file**](https://unlighthouse.dev/guide/guides/config) in the root directory.

### [Example](#example)

```
import Unlighthouse from '@unlighthouse/webpack'

export default {
  // ...
  plugins: [
    Unlighthouse({
      scanner: {
        // simulate a desktop device
        device: 'desktop',
      }
    }),
  ],
}
```

[Edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/2.integrations/webpack.md)

[Markdown For LLMs](https://unlighthouse.dev/integrations/webpack.md)

**Did this page help you? **

Anything that could be done better? :)

Help us improve this page. You can [edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/2.integrations/webpack.md) on GitHub or provide anonymous feedback below.

[**Vite** Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support.](https://unlighthouse.dev/integrations/vite) [**API Reference** Complete API reference for Unlighthouse core functions, context methods, and hooks system.](https://unlighthouse.dev/api-doc)

**On this page **

- [Install](#install)
- [Usage](#usage)
- [Configuration](#configuration)