Remove gulp and upgrade webpack

[vimal1083]

Fixes #2699
Fixes #2689

Add description here.

[codecov]

Codecov Report

Merging #2748 (4dd309b) into main (b7b70cd) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #2748   +/-   ##
=======================================
  Coverage   81.70%   81.70%           
=======================================
  Files         657      657           
  Lines       23945    23945           
=======================================
  Hits        19564    19564           
  Misses       4381     4381           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b7b70cd...4dd309b. Read the comment docs.

[vimal1083]

Having some issues in upgrading webpack dev server and saas-loader. working on it

[vimal1083]

• For production deployment, we continue to use npm run heroku-postbuild.
• Backend Developer, who don't update react code while development can run npm run dev:build once (similar to production command, runs and finishes immediately. does not watch javascript files)
• Front end developers can use npm run watch, it will watch for javascript changes

cc: @frjo

[frjo]

Nice work!

We are missing some pieces however:

1. A watch command with sourcemaps and linting for CSS. This makes CSS development so much easier.
2. The watch command only watch the react app files. The apply/public javascript files do get rebuilt but only after a react app file has been touched.
3. The JavaScript production build is missing the "babel" and "uglify" steps. Or are you arguing that they are not needed? I'm always happy to remove stuff when possible.

[sandeepsajan0]

Worked well for me as a backend developer with npm run dev:build and npm run watch commands.

[vimal1083]

1. A watch command with sourcemaps and linting for CSS. This makes CSS development so much easier.
   • Added source maps for CSS in dev build
2. The watch command only watch the react app files. The apply/public javascript files do get rebuilt but only after a react app file has been touched.
   • Added now, but HMR will not recognize the changes as these files are not part of react app, so the user has to refresh the browser to see the changes. I guess we had the same problem while using gulp.
3. The JavaScript production build is missing the "babel" and "uglify" steps. Or are you arguing that they are not needed? I'm always happy to remove stuff when possible.
   • We still use 'babel' in our webpack files, it helps us to transpile the ES6 javascript. Added TerserPlugin in webpack production file, it will mangle and compress the final Js output. We can have it. It adds an additional level of difficulty for others to read the javascript source code from prod build file.

cc: @frjo

[frjo]

@vimal1083 What do you think about the additions I have made to this PR?

1. Used "concurrently" and "nodemon" to implement watch commands for css and collectstatic.
2. Removed "babel-core", "node-sass-import-once" and "webpack-stream" since it seems they are not used anymore?
3. Updated "babel-jest" and "@svgr/webpack" to make "npm audit" a bit happier. Down to 5 critical.
4. Removed the "TerserPlugin", we do not need to obfuscate the js, this is open source.

Do you see any issues or things that need improvements?

[vimal1083]

I have seen your changes all of them looking good to me. Sorry for the delay