react-scripts-runtime-webpack-config-editor

edit the react-scripts webpack config at runtime.

install

npm install --save-dev react-scripts-runtime-webpack-config-editor

usage

• update your package.json and add an install script

// package.json
{
  "scripts": {
    "install": "react-scripts-runtime-webpack-config-editor <my-webpack-transformer.js>"
  }
}

• add your transformer

// my-webpack-transformer.js
module.exports = function editWebpackConfig (webpackConfig) {
  // webpackConfig is the parsed JS webpack config from react-scrips.
  // modify it here synchronously, & return it.
  return Object.assign({}, webpackConfig, {
    ...my-webpack-customizations
  })
}

why

you love create-react-app, but need just a tiny tweak to the build process.

why not

the whole point of sticking with react-scripts is offloading the complexity of the build system (webpack), and getting rolling updates. tweaking it implies that you want ownership of the build process!

justification

if you must change the build used by react-scripts (create-react-app) you can either fork the project, or react-scripts eject. until now!

• forking stinks. rolling updates come with a cost of you or your team pulling down the upstream project. further, git conflicts are bound to follow.
• ejecting stinks. you get a ton of code pushed into your codebase & immediately onboard technical debt by absorbing all of that code.

your custom modifications are sure to break when you bump react-scripts. however, the amount of modifications should be limited, so hopefully you only need to patch a few lines in your transformer.