How to build a production version of React without minification?

To change the webpack config and build scripts you have either to eject from create-react-app (i would not recommend this step, as it breaks future compatibility) or use tools like rewire to override some settings

Take a look at this.
https://github.com/timarney/react-app-rewired

I personally used just rewire

npm i rewire --save-dev

Here is a sample config i created for one of my projects in the past and it worked pretty good!

  1. Create build.js
  2. Change your package.json so that it runs build.js

build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename="[name].js";
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename="[name].css";
config.plugins[5].options.publicPath="../";

Then in my package.json i changed the npm script links like this
(node build which will run the build.js script)

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

So if you really want to eject from create-react-app, all you have to do is to run

npm run-script eject

Then you will get a new folder with all configs used by create-react-app

But as i said before, there is no reason why not to use rewire and just override the config instead of ejecting.

Leave a Comment