config-overrides.js

const GitRevisionPlugin = require("git-revision-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");

// Used to make the build reproducible between different machines (IPFS-related)
module.exports = (config, env) => {
  if (env !== "production") {
    return config;
  }
  const gitRevisionPlugin = new GitRevisionPlugin();
  const shortCommitHash = gitRevisionPlugin.commithash().substring(0, 8);
  config.output.filename = `static/js/[name].${shortCommitHash}.js`;
  config.output.chunkFilename = `static/js/[name].${shortCommitHash}.chunk.js`;
  config.plugins = config.plugins.filter(
    (plugin) =>
      !(
        plugin instanceof WorkboxWebpackPlugin.GenerateSW ||
        plugin instanceof ManifestPlugin ||
        plugin instanceof MiniCssExtractPlugin
      )
  );
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: `static/css/[name].${shortCommitHash}.css`,
      chunkFilename: "static/css/[name].chunk.css",
    })
  );
  config.module.rules[2].oneOf.find(
    (rule) => rule.loader === require.resolve("file-loader")
  ).options.name = "static/media/[name].[ext]";
  config.module.rules[2].oneOf.find(
    (rule) => rule.loader === require.resolve("url-loader")
  ).options.name = "static/media/[name].[ext]";
  config.optimization.moduleIds = "hashed";
  return config;
};