there is the need to configure webpack dev-server to use https in order to work with service worker. webpack dev-server can be configured to serve self-signed certificate. as a result, chromium needs to launched with --ignore-certificate-errors and --unsafely-treat-insecure-origin-as-secure=https://localhost:8080 arguments, but there is no straightforward way to provide chromium arguments to lighthouse-plugin.

chrome-launcher options supports chromeFlags which is utilised by lighthouse.

1. is there any way to provide the arguments for chrome-launcher?
2. is there any way to control the plugin execution only when the webpack dev-server kicks in and not for webpack in general (for instance, not to run when only bundeling takes place)?

Originally raised in vuejs/vue-cli#3394

Trying to use this plugin with the VueJS CLI causes the vue-template-loader to fail to load. The Vue team identified this as a problem with Lighthouse mocking the window object.

You can see this reproduced in https://github.com/steveworkman/vue-cli-bug-repo

Is this something that can change?

Lighthouse currently doesn't provide a way to override the flags object when consuming this API via https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-cli/bin.ts#L201. Instead, it lets you specify config but the flags object is just consumed from whatever is configured at a CLI level.

Short term we can either PR in a fix for this upstream or host our own copy of bin.js that does allow you to customize the flags object. That would allow our defaultOptions to be fully applied (right now I'm pretty sure only the url and configPath parts are respected.

Thanks so much for your work on web perf in general and Lighthouse in particular. The tools are super useful, and I'm hoping to figure out a way to generate Lighthouse reports in my CI environment on every build. I currently generate and archive Istanbul LCOV and Webpack Bundle Size reports in this manner. However, I'm not really clear on how this might work with this plugin.

The README shows that I need to preconfigure the plugin with an endpoint to test. Assuming that Webpack is generating is building the production bundle that I'm serving, I'm a bit unclear about how I might locally serve this new production bundle, execute the plugin, and then tear everything down.

Am I perhaps misunderstanding the use case for this plugin? If not, do you have any suggestions about how best to achieve this?

Does this still work with https://github.com/googlechrome/lighthouse#lighthouse-w-mobile-devices?

Is there a way to use headless chrome with the plugin?
If not, it'd be a nice option to have similar to how lighthouse itself allows - https://github.com/GoogleChrome/lighthouse/blob/master/docs/headless-chrome.md#cli-headless

After installing the plugin via yarn, and importing it into my development.js config, I get this error TypeError: Cannot read property 'afterEmit' of undefined when I run webpack-dev-server --hot

I am using this plugin in a rails app using webpacker.

My webpacker version: "@rails/webpacker": "^3.5.3"

And here's my development.js config

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const WebpackLighthousePlugin = require('webpack-lighthouse-plugin')

environment.plugins.append(
  'WebpackLighthousePlugin',
  new WebpackLighthousePlugin({
    url: 'http://localhost:3000'
  })
)

module.exports = environment.toWebpackConfig()

Do I need to upgrade webpacker? Saw a similar issue over here for another plugin

I think we could archive this repo. Users can run webpack and then lighthouse themselves.

The perf option seems to be ignored, running the following two configs creates the same report:

plugins: [
  new WebpackLighthousePlugin({
    url: 'https://airhorner.com',
    perf: true
  })
]

plugins: [
  new WebpackLighthousePlugin({
    url: 'https://airhorner.com'
  })
]

Hi Addy,

when requiring the plugin in the webpack.config file and executing webpack I get this error message:

Error: Cannot find module 'lighthouse/lighthouse-core/lib/environment.js'

It seems that the node compatibility check was removed from lighthouse core.

Thanks,
Stefan

It'd be nice to have the ability to configure options like the output format (JSON, HTML, other) and to specify the output location.
Lighthouse offers options of:

• --output
• --output-path

Hello,

I am investigating how to run performance audits locally with lighthouse and allow for performance budgets much like what webpack does with size budgets but giving the power to the user.

I am aware that running performance audits in a "dev environment" is less than ideal but this would be a first opt-in perf indicator and a tool to be improved upon.

The first step to doing this would be by retrieving the lighthouse results in JSON format and then evaluate them against user defined values.

Lighthouse as a standalone already enables JSON outputs but I am unable to retrieve those values from this plugin. Is it possible and an adequate functionality for this plugin?

Thanks for reading and for this OSS work :)

After installing this plugin and configuring it in my webpack conf, when starting webpack, it will fail on the plugin with the following output

Unable to connect to Chrome
If you're using lighthouse with --skip-autolaunch, make sure you're running some other Chrome with a debugger.                                                                        
error Command failed with exit code 1.

What would be the proper way to fix this issue ?

When using Lighthouse in the CLI, it is possible to view the HTML report directly in the browser using --view. Is it possible to include the same functionality on this plugin?

On https://github.com/addyosmani/webpack-lighthouse-plugin/blob/master/README.md

In this sentence:
"If you're trying to use webpack-dev-server with this plugin, first run it against your local build using the webpack-dev-server CLI:"

The link needs to get updated to:
https://webpack.js.org/