CODEWITHSUNDEEP
javascriptreactjswebpackphaser-framework
Jon
Jon

Reputation: 385

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

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:

Weird looking code in bundle.js

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",

Upvotes: 5

Views: 3677

Answers (1)

Damian Busz
Damian Busz

Reputation: 1848

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: {}
        }
    ]
};

Upvotes: 4

Related Questions