@morsedigital/webpack-defaults/src/index.js

/* eslint-env node */
// process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const { resolve } = require('path');
const Merge = require('webpack-merge');
const { environment } = require('@rails/webpacker');
const config = require('@rails/webpacker/package/config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const { env } = require('process');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { getIfUtils, removeEmpty } = require('webpack-config-utils');

const { ifProduction } = getIfUtils(env.NODE_ENV);

const context = resolve(config.source_path);
const loaderPath = resolve(__dirname + '/loaders');

const assets = require(resolve(loaderPath, 'assets'));
const styles = require(resolve(loaderPath, 'styles'));

const uglifierSetting = {
  parallel: true,
  cache: true,
  sourceMap: true,
  uglifyOptions: {
    ie8: false,
    ecma: 7,
    warnings: false,
    mangle: false,
    compress: {
      warnings: false,
      comparisons: false,
      drop_console: true,
    },
    output: {
      ascii_only: true,
    },
  },
};

const entry = require('./entries');
const source = resolve(config.source_path);

const SetPath = (s, e) => (e ? resolve(s, e) : undefined);

const modules = removeEmpty([
  resolve(source, config.source_entry_path),
  SetPath(source, config.image_entry),
  SetPath(source, config.stylesheets_entry),
  resolve('node_modules'),
]);

environment.plugins.append(
  'Manifest',
  new WebpackAssetsManifest({
    integrity: false,
    entrypoints: true,
    writeToDisk: true,
    publicPath: true,
    transform(imgs, manifest) {
      const regx = /.(jpg|png|jpeg)/;
      Object.entries(imgs).forEach(([k, v]) => {
        console.log('Testing', regx.test(k));
        if (regx.test(k)) {
          const { key, value } = manifest.hooks.customize.call({
            key: k.replace(regx, '.webp'),
            value: v.replace(regx, '.webp'),
          });

          imgs[key] = value;
        }
      });

      // return assets;
    },
  })
);

environment.plugins.prepend(
  'Lodash',
  new LodashModuleReplacementPlugin({
    collections: true,
    currying: true,
    shorthands: true,
    // , exotics: true
    // , paths: true
  })
);
console.log(resolve(source, config.image_entry) + '/*.(png|jpg)');
environment.plugins.prepend('CreateWebp', new ImageminWebpWebpackPlugin());

environment.plugins.prepend(
  'ExtractText',
  new MiniCssExtractPlugin({
    filename: ifProduction('[name]-[contenthash:8].css', '[name].css'),
    chunkFilename: '[name]-[contenthash:8].chunk.css',
  })
);

environment.plugins.prepend('Moment', new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/));

environment.plugins.prepend(
  'LoaderOptions',
  new webpack.LoaderOptionsPlugin(
    ifProduction(
      {
        minimize: true,
        debug: false,
      },
      {
        debug: true,
      }
    )
  )
);

if (ifProduction()) {
  environment.config.set('optimization.minimizer', [new UglifyJsPlugin(uglifierSetting)]);
  // environment.plugins.prepend('UglifyJs', new UglifyJsPlugin(uglifierSetting));
  environment.plugins.prepend(
    'optimization.css',
    new OptimizeCssAssetsPlugin({
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    })
  );
}

console.log(resolve(config.source_path, config.image_entry || 'images'));

environment.loaders.insert('file', assets(env.NODE_ENV));
environment.config.set('context', context);
environment.config.set('resolve.alias', {
  images: resolve(config.source_path, config.image_entry || 'images'),
  Images: resolve(config.source_path, config.image_entry || 'images'),
});

// webpackConfig.entry = entry; // Overwrite the webpacker entries

module.exports = (cssHotReloading = false) => {
  environment.loaders.insert('css', styles(env.NODE_ENV, cssHotReloading));
  environment.loaders.insert('sass', styles(env.NODE_ENV, cssHotReloading, true));
  return { environment, entry };
};