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 #

• Hot Module Reloading will trigger re-scans
• File open hints will be shown in the client
• Automatic resolving of route definitions (requires manual discovery)

Install #

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 (.lighthouse by default), it's recommended you .gitignore these files.

.lighthouse

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 #

import Unlighthouse from '@unlighthouse/webpack'

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

CJS example #

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 #

import Unlighthouse from '@unlighthouse/webpack'

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