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. The idea is when you build your project, the "Clean for WebPack" will delete all the files/folders in your distribution folder that you specified in your WebPack configuration then the "Copy WebPack Plugin" will copy the updated files/folders from your common source folder to your distribution folder.

Lets say we have ~/Documents/htdocs/frontend/common/templates as our source common template for your projects and our target distribution folder is at ~/Documents/htdocs/sites/webfoobar.com/themes/custom/sitetheme/templates. The webpack configuration files are at ~/Documents/htdocs/frontend/webfoobar.com. The goal is to update the target distribution folder at ~/Documents/htdocs/sites/webfoobar.com/themes/custom/sitetheme/templates from source folder at ~/Documents/htdocs/frontend/common/templates.

Steps:

1. Install the "Copy WebPack Plugin" and "Clean for WebPack" plugins:

         
   npm install copy-webpack-plugin clean-webpack-plugin --save-dev
         
       

2. Update your "webpack.config.js" with the following:

         
   const path = require('path');
   const CleanWebpackPlugin = require('clean-webpack-plugin');
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   const distAbsPath = path.resolve(__dirname, '../../sites/webfoobar.com/themes/custom/sitetheme');
   const commonAbsPath = path.resolve(__dirname, '../common');
   
   module.exports = (env = {}, argv = {}) => {
     return {
       plugins: [
         new CopyWebpackPlugin([{
           from: '**',
           to: distAbsPath + '/templates',
           context: commonAbsPath + '/templates',
         }],
         {
           copyUnmodified: false
         }),
         new CleanWebpackPlugin([
             'templates'
           ],
           {
             root: distAbsPath,
             exclude: ['README.txt'],
             verbose: true,
             dry: false
         })
       ]
     }
   };