How to build a production version of React without minification?

The files are kept in the server process memory and not written to disk, unless you eject the scripts (or if it is possible to use a tool like 'rewire') and modify them to write it to disk using the writeToDisk option as described in the webpack DevServer docs.

You can however get the actual file list/links by navigating to the webpack-dev-server endpoint under the server.

For instance if using the default url at localhost:3000 then use the following url to see all files on the server:

http://localhost:3000/webpack-dev-server

But what you really need is only the index.html (which is in general just a stub that loads the JS files) and the 3 following JS files which appear to be consistent on all create-react-app installments, along with their respective source map files.

1. main.chunk.js
2. bundle.js
3. vendors~main.chunk.js

You can just right click on the links on the page and save them, or you can navigate direct the link or get them from the Chrome Dev Tools "sources" tab.

Note that in general for code changes only the main.chunk.js file is updated, so for the average code change you might just fetch the updated main.chunk.js and main.chunk.js.map files.

I wanted the unobfuscated code of a React app - mostly of curiosity, I had the source - while having the job of rewriting it in Angular (producing a far more maintainable app 5% of the size and 1% dependencies).

I've never used React but discovered by modifying the file

<base_path>/node_modules/react-scripts/config/webpack.config.prod.js

and replacing the large optimization config item, under module.exports, with the following...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm run build built unobfuscated, readable code that ran as expected, using no other modifications. Used Gitbash only with the commands npm install, npm run build and npm start - Just thought someone may find that useful.

I don't recommend this because the code you want is still wrapped in a webpack eval mess. It's easier to pick the useful bits from the source or just rebuild the app. At best, I got to see what a cluster react and webpack is.

Why can't you see the source files? Here is what I would try:

1. Start your react app with npm run start
2. Open your browser to http://localhost:3000
3. Open Developer tools and inspect the created chunked bundles by the webpack-dev server. In Chrome on a mac, you can do the following: cmd+option+j will open developer tools. Then click the sources tab: within this tab you will see the bundles created by react's build configuration. Now the output of these bundles might not be pretty but it's all there.

Alternatively, all your application's build configuration settings are contained within your webpack.config.js file even when you use create-react-app. As this configuration is just encapsulated within the react-scripts node module. So maybe you could try editing this file directly, without ejecting: <base_path>/node_modules/react-scripts/config/webpack.config.js. Although you need to be careful as to not break an existing configuration setting. You probably want to mess with the source-map settings for production builds. At least this way if you ruin this file you can always just remove and reinstall react-scripts and be back to your initial configuration. This will also allow you to play around with your customizations in 'semi-safe' sandboxed environment. Remember, there is no magic that create-react-app is providing rather it's just making useful defaults for your build configuration.

Lastly, as @xzesstence pointed out you can try out the react-app-rewired module.

Hopefully that helps!

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.