"easily" extend create-react-app

00-prepare.sh

#!/usr/bin/env bash
set -ex

# Overwrites a CRA webpack config with one that loads the config from CRA
# and passes it to a function you control.
overwrite-cra-webpack() {
  echo "const path = require('path')
const extensions = path.join(process.cwd(), 'webpack.config.js')
module.exports = require(extensions)(require('${1}'))"
}

(
  # cd to CRA.
  cd node_modules/react-scripts-ts/config

  # grab CRA version.
  REACT_SCRIPTS_VERSION=$(node -e "process.stdout.write(require('../package.json').version.toString())")
  # prepare file names.
  FILE_NAME_BASE="webpack.config.${REACT_SCRIPTS_VERSION}"
  DEV_CONFIG="${FILE_NAME_BASE}.dev.orig.js"
  PROD_CONFIG="${FILE_NAME_BASE}.prod.orig.js"

  if [ ! -e "${DEV_CONFIG}" ]; then
    # Overwrite dev config.
    cp webpack.config.dev.js "${DEV_CONFIG}"
    overwrite-cra-webpack "./${DEV_CONFIG}" > webpack.config.dev.js

    # Overwrite prod config.
    cp webpack.config.prod.js "${PROD_CONFIG}"
    overwrite-cra-webpack "./${PROD_CONFIG}" > webpack.config.prod.js
  fi
)

01-webpack.config.js

/**
 * @param {webpack.Configuration} config
 * @returns {webpack.Configuration}
 */
module.exports = function(config) {
  // Example: set target to electron-renderer.
  config.target = 'electron-renderer'

  return config
}