edit the react-scripts webpack config for dev and prod builds!

Downloads in past


1.0.14 years ago5 years agoMinified + gzip package size for react-scripts-webpack-config-editor in KB


edit the react-scripts webpack config at runtime.
Codeship Status for cdaringe/react-scripts-webpack-config-editor JavaScript Style Guide


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


  • update your package.json and add an install script

// package.json
  "scripts": {
    "install": "react-scripts-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, {


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!


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.