Getting webp images and autogeneration working in Rails 6

environment.js

const IMAGE_REGEXP = /\.(?:jpe?g|png)$/; // https://regexper.com/#%2F%5C.%28%3F%3Ajpe%3Fg%7Cpng%29%24%2F
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
const { environment } = require('@rails/webpacker');

environment.plugins.prepend('ImageminWebpWebpackPlugin', new ImageminWebpWebpackPlugin({
  silent: false,
  detailedLogs: true,
}));

const manifest = environment.plugins.get('Manifest')
manifest.hooks.customize.tap('ImageminWebpWebpackPlugin', (entry, _original, manifest, _asset) => {
  const { key, value } = entry

  if (IMAGE_REGEXP.test(key)) {
    manifest.set(key.replace(IMAGE_REGEXP, '.webp'), value.replace(IMAGE_REGEXP, '.webp'))
  }
});

module.exports = environment