Upgrade Webpack from v4 to v5

[mudassir-hafeez]

What are the relevant tickets?

#5077

Description (What does it do?)

This PR upgrades dependencies related to webpack upgrade 5 to support python 3.12.x later.

Screenshots (if appropriate):

Before:

after:

How can this be tested?

1. Run docker-compose up. Your watch container will automatically generate the Webpack bundles for you.
2. Verify that the Webpack build is generated successfully with a webpack-stats.json file and that all xPro pages are working correctly.
3. Also, verify/test with the production configuration if possible.

How to generate the bundles?

1. Run docker-compose up. Your watch container will automatically generate the Webpack bundles for you.
2. To verify Webpack bundles for production, go to the watch container's shell and manually run node node_modules/webpack/bin/webpack.js --config webpack.config.prod.js --bail. This will generate the production bundles for you.
3. Use the report.html file to compare the differences visually.

Performance evalution:

• Switch between the master and this branch for testing.
• Generate the Webpack bundles on the master branch and note the bundle size.
• Generate the Webpack bundles on this branch and note the bundle size again.

Additional Context

• After upgrading to Webpack 5, the common bundle along with a new one will automatically get pulled in with an additional render_bundle in the appropriate views.

[mudassir-hafeez]

I've rebased/retested this branch as there was a conflict in a lock file after some PR's merged. It should be good to go with a review now.

[arslanashraf7]

@mudassir-hafeez Could you rebase this PR?

[mudassir-hafeez]

@mudassir-hafeez Could you rebase this PR?

I've retested some pages after the rebase, and it should be good to proceed.

[arslanashraf7]

The PR needs a rebase.

Other than that, The testing looks fine but I think there are a few issues with the generated bundles. Although this has stopped generating header-root bundle but its generating a new one with a random name which is not getting pulled on all the pages. For this I think we should combine all these in the header bundle to reduce confusion.

Also, The generated bundle size is more than what it was on master.

Also, The performance stats of all the pages have reduced by ~10%.

[mudassir-hafeez]

The PR needs a rebase.

This PR is rebased now.

Other than that, The testing looks fine but I think there are a few issues with the generated bundles. Although this has stopped generating header-root bundle but its generating a new one with a random name which is not getting pulled on all the pages. For this I think we should combine all these in the header bundle to reduce confusion.

Also, The generated bundle size is more than what it was on master.

Also, The performance stats of all the pages have reduced by ~10%.

I have made changes in this regard and combined assets into one, except those specifically mentioned in the entry for dev/prod config, similar to MITxOnline. And re-verified the generated bundle size for both the Webpack upgrade and master branches locally. The overall chunk size still appears slightly better on the Webpack upgrade branch compared to master. And the performance stats seem slightly equal what I discussed earliar, but yeah it has some fluctuation.

[arslanashraf7]

👍