creating custom react-scripts (without ejecting) - it is ugly but it works

__usage example

usage:
node ./custom-react-scripts start

custom-react-scripts.js

switch (process.argv[2]) {
  // The "start" script is run during development mode
  case 'start':
    customize({
      "react-scripts/config/webpack.config.dev.js": loadCustomizer('./webpack-overrides.dev')
    });
    require('react-scripts/scripts/start.js');
    break;
  // The "build" script is run to produce a production bundle
  case 'build':
    customize({
      "react-scripts/config/webpack.config.prod.js": loadCustomizer('./webpack-overrides.prod')
    });
    require('react-scripts/scripts/build.js');
    break;
  default:
    console.log('customized-config only supports "start", "build", and "test" options.');
    process.exit(-1);
}

// Attempt to load the given module and return null if it fails.
function loadCustomizer(module) {
  try {
    return require(module);
  } catch (e) {
    if (e.code !== "MODULE_NOT_FOUND") {
      throw e;
    }
  }

  // If the module doesn't exist, return a
  // noop that simply returns the config it's given.
  return config => config;
}

function customize(customizers) {
  Object.keys(customizers).forEach(file => {
    const _module = require(file);
    customizers[file](_module);
  })
}

webpack-override.dev.js

const path = require('path');
const util = require("util");

module.exports = function (config) {
  config.node   = {
    __dirname: true
  };
  const babelLoader      = config.module.rules.find(rule => rule.loader && rule.loader.includes("babel-loader"));
  babelLoader.options.plugins = babelLoader.options.plugins || [];
  babelLoader.options.plugins.push("transform-decorators-legacy");
  return config;
};