EMS-ESP32/interface/config-overrides.js

const ManifestPlugin = require('webpack-manifest-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const ProgmemGenerator = require('./progmem-generator.js')

module.exports = function override(config, env) {
  const hosted = process.env.REACT_APP_HOSTED

  if (env === 'production' && !hosted) {
    console.log('Custom webpack...')

    // rename the output file, we need it's path to be short for LittleFS
    config.output.filename = 'js/[id].[chunkhash:4].js'
    config.output.chunkFilename = 'js/[id].[chunkhash:4].js'

    // take out the manifest and service worker plugins
    config.plugins = config.plugins.filter(
      (plugin) => !(plugin instanceof ManifestPlugin),
    )
    config.plugins = config.plugins.filter(
      (plugin) => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW),
    )

    // shorten css filenames
    const miniCssExtractPlugin = config.plugins.find(
      (plugin) => plugin instanceof MiniCssExtractPlugin,
    )
    miniCssExtractPlugin.options.filename = 'css/[id].[contenthash:4].css'
    miniCssExtractPlugin.options.chunkFilename =
      'css/[id].[contenthash:4].c.css'

    // build progmem data files
    config.plugins.push(
      new ProgmemGenerator({
        outputPath: '../lib/framework/WWWData.h',
        bytesPerLine: 20,
      }),
    )

    // add compression plugin, compress javascript
    config.plugins.push(
      new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js)$/,
        deleteOriginalAssets: true,
      }),
    )
  }
  return config
}