Setup WebPack to sync your defined source folders/files with your distribution folder

In Grunt, there's a plugin called Grunt-sync that can keep directories in sync. This is useful if you have custom template that is common and used in all your websites you are developing (it is good practice to modify/update your common custom template in one place instead of modifying/updating in each of websites source files). As of this writing there's no plugin for WebPack that can do the functionality same as Grunt-sync. However, we can "almost" achieve the functionality of Grunt-sync on WebPack by using two plugins. These are "Copy WebPack Plugin" and "Clean for WebPack" plugins.

Solution to no CSS source map file generated under production mode in Webpack 4

The issue is in Webpack 4 under "production" mode there is no source map file generated only for CSS (no problem in javascript source map file) but there is no issue in generation of source map for CSS under "development" mode.

Here are my previous configurations: