Disable the bundle.js bundling file Webpack creates in React using Create React App or Craco? Or at least get 'Performance' to work with source maps

Question

How can I turn off bundling completely in create react app or craco? I'm trying to use craco to do it and my config for webpack is as follows:

        configure: {
            /* Any webpack configuration options: https://webpack.js.org/configuration */
            mode: 'development',
            optimization: {
                minimize: false,
            },
            devtool: 'eval-source-map',
        },

I need to turn off bundling because even with source maps, the performance analyzer (Waterfall) in Firefox still shows some calls coming from bundle.js, which is... Not helpful at all since some calls are coming from "bundle.js line 3051 %3E eval:81828" - and when clicked, say "line not found". The Call Tree in the Performance tab also just shows nothing but bundle.js (eval:####) calls. When THOSE lines are clicked, it brings me to code that looks like:

I'm trying to optimize a Phaser webgl game and bundling is making things very difficult. Any help would be appreciated.

Oh and another weird thing - when looking at the Waterfall record for a Phaser call - it usually starts off with the weird broken "bundle.js%20line%20####%20%3E%20eval:#######" call, but has phaser.js calls below that with working links to the line of code that's calling it.

Relevant package.json dependencies:

"@craco/craco": "^7.0.0-alpha.3",
"phaser": "^3.55.2",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",

Answer 1

You can achieve this with cracko config.

module.exports = {
    webpack: {
        configure: {
            output: {
                filename: 'static/js/[name].js'
            },
            optimization: {
                runtimeChunk: false,
                splitChunks: {
                    chunks(chunk) {
                        return false;
                    }
                }
            }
        }
    },
    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
                    return webpackConfig;
                }
            },
            options: {}
        }
    ]
};