Skip to content

Instantly share code, notes, and snippets.

@agrberg

agrberg/environment.js

Created April 11, 2020 16:40
Show Gist options
  • Save agrberg/53f7ccc61f35e3af28f53d19eef59675 to your computer and use it in GitHub Desktop.
Save agrberg/53f7ccc61f35e3af28f53d19eef59675 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. agrberg created this gist Apr 11, 2020.
    19 changes: 19 additions & 0 deletions environment.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    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