fix: optimize webpack watch task to refresh time between changes to scss and js

[DevinWalker]

Bug Report

User Story

As a developer, I need sourcemaps to work properly so that I can easily identify where SCSS lines are located.

As a developers, I need the watch task to not take forever to reload so that I can be more efficient with my development.

Current Behavior

1. Sourcemaps are not found by Chrome/Safari/etc.
2. The watch task appears to do too many tasks and takes a long time to reload.
3. The clean-webpack-plugin runs twice when the production task is ran.

Expected Behavior

1. Sourcemaps should be found within devtools.
2. Watch live reload shouldn't take a long time to complete.
3. Tasks should be optimized
4. Packages should be reduced to only necessary ones.

Bug Type

• This bug describes functionality that once worked as expected in a previous version.

Steps to Reproduce

1. Clone Give to /wp-content/plugins/give
2. Run npm install
3. Run npm watch

Possible Solution

• Reduce the number of tasks completed on watch

Related

Acceptance Criteria

• I can view the sourcemaps to the SCSS line number within chrome devtools and other browsers
• I can run watch without having to wait a long time so it messes up my efficiency.
• Tasks that run are efficiently
• NPM packages are reduced to only the ones needed and run on the latest versions.

[ravinderk]

@DevinWalker I am closing this old duplicate issue: #3860

[ravinderk]

@DevinWalker

NPM packages are reduced to only the ones needed and run on the latest versions.
I updated webpack related packages and optimize package.json. To remove and update other packages we need to create other issue and because it will take time to test to look into code for there usage .( or compatibility if we will update them )

Let me know what do you think.

[ravinderk]

@DevinWalker can we add this package to webpack: https://github.com/nuxt/webpackbar

and also this https://github.com/webpack-contrib/webpack-bundle-analyzer with the custom command to see how much weight each scripts adding to bundle

[DevinWalker]

@ravinderk I'm getting an issue with npm run production:

[DevinWalker]

Sourcemaps are working now. I'd like to continue to see how we can reduce the npm run watch load times so it's much quicker per change. Right now it's not even worth using it within the https://localhost:3000 because of the 4-6s reload time makes it slower than just manually refreshing.

[ravinderk]

@DevinWalker To further improve watch task performance, I took the following decisions:

1. Stop minimizing images on watch task. It will not happen only on production task.
2. Moved RTL CSS generate task to production

for ref:
93a1fcf...837f0a7
837f0a7...ae94a15
Note: I pushed code to release/2.4.1

[DevinWalker]

I figured out why my local was so slow loading here: https://local.getflywheel.com/community/t/local-with-foundationpress-slow-browsersync-localhost/996/7

Long story short was I had to manually add ::1 give.test to my /etc/hosts file and now the site loads and refreshes 100x faster.

Closing as webpack is performing nicely now with BrowserSync on my end.