webpack

Introduction

Using the Unlighthouse webpack plugin allows you to close the feedback loop in fixing your Google Lighthouse issues in your development site.

Features

Install

Public Early Access 🎉

Unlighthouse is currently in public early access, made possible by my sponsors 💖. Please consider becoming a sponsor or following me @harlan_zw 🐦if you like this project.

Sponsor
npm add -D @unlighthouse/webpack
# yarn add -D @unlighthouse/webpack
# pnpm add -D @unlighthouse/webpack

Git ignore reports

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

.gitignore
.unlighthouse

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

webpack.config.js
import Unlighthouse from '@unlighthouse/webpack'

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

CJS example

webpack.config.js
const Unlighthouse = require('@unlighthouse/webpack')

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

Configuration

You can either configure Unlighthouse via the plugin, or you can provide a unlighthouse.config.ts file in the root directory.

See Configuring Unlighthouse for more information.

Example

webpack.config.ts
import Unlighthouse from '@unlighthouse/webpack'

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