@caweb/webpack 1.5.18 → 1.6.1

package/lib/args.js

@@ -0,0 +1,46 @@
+// flags can be passed via argv0 
+// we also add args from NODE_OPTIONS
+let flags = [].concat(
+  processArgs(process.argv),
+  processArgs(process.argv0.split(' ')),
+  processArgs(process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.split(' ') : []),
+)
+
+// this function processes an array of arguments
+// and returns an array of flags and values
+function processArgs( arr ){
+  let tmp = [];
+
+  arr.filter(Boolean).map((o) => {
+    return o.replaceAll("'", '').split('=').forEach((e => tmp.push(e)))
+  });
+
+  return tmp
+}
+
+// function to add a flag
+function addFlag(flag, value = null){
+    if( ! flagExists(flag) ){
+        flags.push(flag);
+        if( value ){
+            flags.push(value);
+        }
+    }
+}
+
+// check if a flag exists
+function flagExists(flag){
+  return flags.includes(flag)
+}
+
+// get the value of a flag
+function getArgVal(flag, defaultValue = null){
+  return flagExists(flag) ? flags[flags.indexOf(flag) + 1] : (defaultValue ?? false);
+}
+
+export { 
+  flags,
+    flagExists, 
+    addFlag,
+    getArgVal 
+};

package/lib/loader.js

@@ -0,0 +1,117 @@
+/**
+ * Various loader options for webpack handlebars loader.
+ * @see https://github.com/pcardune/handlebars-loader
+ */
+
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const currentPath = path.dirname(fileURLToPath(import.meta.url));
+const appPath = process.cwd();
+const helperDirs = [...new Set([
+        getAllHelpers( path.join( currentPath, '..', 'helpers') ),// our loader helpers
+        fs.existsSync( path.join( appPath, 'helpers') ) ? // any custom helpers
+        [
+            path.join( appPath, 'helpers'),
+            ...getAllHelpers( path.join( appPath, 'helpers') ),
+        ] : []
+    ].flat())];
+
+
+// function to resolve partials
+const partialResolver = ( partial, callback ) => {
+    // fallback path to the @caweb/template package
+    const fallbackPath = path.join( currentPath, '..', '..', 'template' );
+    
+    let partialDir = '';
+   
+    // template parameter specific partials
+    switch ( partial ) {
+        /**
+         * Semantic elements are served from the /semantic/ directory
+         * 
+         * - header
+         * - footer
+         * 
+         * @link https://www.w3schools.com/html/html5_semantic_elements.asp
+         */
+        case 'branding':
+        case 'footer':
+        case 'header': 
+        case 'mobileControls': 
+        case 'navFooter':
+        case 'navHeader': 
+        case 'utilityHeader': 
+          partialDir = 'semantics';
+          break;
+    
+        // content is served from the /content/ directory
+        case 'index': 
+        case 'content': 
+          partialDir = 'content';
+          break;
+    
+        // components are served from the /components/ directory
+        case 'alert':
+        case 'card':
+          partialDir = `components/${partial}`;
+          break;
+        
+        // forms are served from the /forms/ directory
+        case 'searchForm':
+          partialDir = 'forms';
+          break;
+        
+        // tables are served from the /tables/ directory
+        case partial.includes('Table'):
+          partialDir = 'tables';
+          break;
+    }
+    
+    // if the partial was mapped to specific directories under the @caweb/template
+    if( partialDir ){
+        // we remove the Form from the name
+        // we remove the Table from the name
+        // we change the partial name from camelCase to dash-case
+        partial = partial.replace(/(Form|Table)/, '').replace(/([A-Z])/g, '-$1').toLowerCase();
+
+        // if the partial exists in the appPath, use that first
+        // otherwise use the template path
+        if( fs.existsSync( path.join( appPath, partialDir, `/${partial}.html` ) ) ){
+            partial = path.join( appPath, partialDir, `/${partial}.html` );
+
+        // if the @caweb/template is installed we use that as the fallback
+        } else if( fs.existsSync( path.join( fallbackPath, partialDir, `/${partial}.html` ) ) ) {
+            partial = path.join( fallbackPath, partialDir, `/${partial}.html` );
+        }
+    }
+
+    callback(false, partial );
+
+};
+
+// get all helpers in a given path
+function getAllHelpers( helpersPath ) {
+    return fs.readdirSync(
+        helpersPath,
+        { 
+            withFileTypes: true , 
+            recursive: true
+        }
+    )
+    .filter( dirent => dirent.isDirectory() )
+    .map( dirent => path.join( dirent.parentPath, dirent.name ) );
+}
+
+export default {
+    // rootRelative: appPath,
+    partialResolver,
+    helperDirs,
+    precompileOptions: {
+        // prevent certain helpers from being precompiled
+        knownHelpersOnly: false,
+        preventIndent: true,
+    },
+    extensions: ['.html', '.handlebars', '.hbs', '' ],
+};

package/lib/server.js

@@ -0,0 +1,134 @@
+/**
+ * This file is used base configuration DevServer settings for Webpack
+ * 
+ * @see https://webpack.js.org/configuration/dev-server/
+ */
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+
+const appPath = process.cwd();
+
+// default url
+let server = 'http';
+let host = 'localhost';
+let port = 9000;
+
+// list of project directories to watch for changes
+// by default css/js files are watched by webpack
+// these directories are also added to the static file serving with watch true
+let watchFiles = fs.readdirSync( 
+        path.join( appPath ),
+        { 
+            withFileTypes: true, 
+        } 
+      )            
+      .filter( (dirent) => {
+        // we exclude certain directories from being watched
+        let file = path.join( dirent.parentPath, dirent.name );
+        let excluded = file.startsWith( `${appPath}\\build`) ||
+            file.startsWith( `${appPath}\\src`) ||
+            file.includes( `\\.`) ||
+            file.includes( 'vendor' ) || 
+            file.includes( 'node_modules' );
+
+        return dirent.isDirectory() && ! excluded
+      })
+      .map( dirent => path.join( dirent.parentPath, dirent.name, '**', '*').replace(/\\/g, '/') )
+    
+// base dev server config
+let devServer = {
+    server,
+    host,
+    port,
+    open: [ `${server}://${host}:${port}` ],
+
+    static: [
+      /**
+       * Static files are served from the following files in the following order
+       * we don't have to add the build directory since that is the output.path and proxied
+       * 
+       * node_modules - Allows loading files from other npm packages
+       * media - Allows loading media files from the media directory
+       */
+      {
+        directory: path.join(appPath, 'node_modules'),
+        watch: false,
+      },
+      {
+        directory: path.join(appPath, 'media'),
+        watch: false,
+      },
+    ],
+
+    proxy:[
+      /**
+       * WordPress Proxy Configuration is deprecated
+       * @since 31.3.0
+       */
+      {
+        context: ['/build'],
+        target: `${server}://${host}:${port}`,
+        pathRewrite: {
+          '^/build': ''
+        },
+        logLevel: 'info'
+      },
+      /**
+       * We proxy the node_modules and media directory so they serve from the root
+       */
+      {
+        context: ['/node_modules'],
+        target: `${server}://${host}:${port}`,
+        pathRewrite: { '^/node_modules': '' },
+      },
+      {
+        context: ['/media'],
+        target: `${server}://${host}:${port}`,
+        pathRewrite: { '^/media': '' },
+      }
+    ],
+
+    liveReload: true,
+    hot: true,
+    
+    // watchFiles
+    // we watch all folders in the app except build, node_modules and src
+    watchFiles: {
+      paths: watchFiles,
+      options: {
+        depth: 2,
+      },
+    },
+}
+
+// function to get the server config
+const getServer = () => {
+    return devServer;
+}
+
+// function to add to the server config
+const addToServer = ( key, value ) => {
+    devServer[ key ] = value;
+}
+
+// function to update target url settings
+const updateTarget = ( url ) => {
+    // update which url to open
+    devServer.open = [ url ];
+
+    // update all the proxy targets
+    devServer.proxy = devServer.proxy.map( ( proxy ) => {
+        proxy.target = url;
+        return proxy;
+    } );
+
+}
+
+export { 
+    getServer,
+    addToServer,
+    updateTarget
+};

package/lib/webpack.wp.config.js

@@ -0,0 +1,99 @@
+/**
+ * Modified WordPress Scripts Webpack Configuration 
+ * 
+ * @package CAWebPublishing 
+ * @link https://webpack.js.org/configuration/
+ */
+
+/**
+ * External Dependencies
+ */
+import baseConfig from '@wordpress/scripts/config/webpack.config.js';
+import { getArgVal } from './args.js';
+
+/**
+ * Internal dependencies
+ */
+
+// Wordpress ignores the webpack --mode flag
+// if the flag is passed we use that mode 
+// otherwise use whatever Wordpress is using
+let mode = getArgVal('--mode') ? getArgVal('--mode') : baseConfig.mode;
+let isProduction = mode === 'production';
+
+// Update some of the default WordPress webpack rules.
+baseConfig.module.rules.forEach((rule, i) => {
+  const r = new RegExp(rule.test).toString();
+
+  switch(r){
+    // WordPress adds a hash to asset file names we remove that hash.
+    case new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString():
+      rule.generator.filename = 'images/[name][ext]';
+      break;
+    case new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString():
+      rule.generator.filename = 'fonts/[name][ext]';
+      break;
+    case new RegExp(/\.svg$/).toString():
+      // we don't want SVG to be asset/inline otherwise the resource may not be available.
+      // the asset should be an asset/resource we move them to the fonts folder. 
+      if( 'asset/inline' === rule.type ){
+        rule.type = 'asset/resource';
+        rule.generator = { filename: 'fonts/[name][ext]' };
+
+        delete rule.issuer;
+      }
+      break;
+    // silence deprecation warnings from sass
+    case new RegExp(/\.(sc|sa)ss$/).toString():
+      rule.use[rule.use.length-1].options.sassOptions = {
+        silenceDeprecations: ['global-builtin', 'import', 'color-functions', 'if-function']
+      };
+      break;
+    case new RegExp(/\.m?(j|t)sx?$/).toString():
+      // @since @wordpress/scripts@30.20.0 babel-loader is used for js and ts files
+      
+      // Added the Transform class properties syntax plugin to the babel-loader.
+      // @see https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
+      rule.use[0].options.plugins.push('@babel/plugin-proposal-class-properties');
+
+      // we add thread-loader before the babel-loader
+      // Spawns multiple processes and split work between them. This makes faster build.
+      // @see https://webpack.js.org/loaders/thread-loader/
+      rule.use = [{
+        loader: 'thread-loader',
+        options: {
+          workers: -1,
+        },
+      }].concat(rule.use);        
+
+    break;
+  }
+});
+
+// Update some of the default WordPress plugins.
+baseConfig.plugins = baseConfig.plugins.map((plugin, i) => {
+  const pluginName = plugin.constructor.name;
+  
+  switch(pluginName){
+    case 'MiniCssExtractPlugin':
+      // we change the default naming of the CSS files
+      plugin.options.filename = isProduction ? '[name].min.css' : '[name].css';
+      break;
+    case 'RtlCssPlugin':
+      // we disable the RTL CSS generation
+      plugin = false;
+      break;
+      
+  }
+
+  return plugin;
+}).filter( Boolean );
+
+/**
+ * we remove the WordPress devServer declaration since we can only have 1 when exporting multiple configurations
+ * 
+ * @see https://github.com/webpack/webpack-cli/issues/2408#issuecomment-793052542
+ */
+delete baseConfig.devServer;
+
+export default baseConfig;

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.5.18",
+  "version": "1.6.1",
   "description": "CAWebPublishing Webpack Configuration",
   "main": "webpack.config.js",
   "files": [
+    "helpers",
+    "lib",
+    "tests",
     "webpack.config.js",
-    "tsconfig.json",
-    "helpers"
+    "tsconfig.json"
   ],
   "type": "module",
   "scripts": {
     "webpack": "webpack",
-    "serve": "webpack serve --config ./plugins/html/webpack.config.js",
-    "config:test": "webpack configtest",
+    "test:config": "webpack configtest",
+    "test:serve": "set NODE_OPTIONS='--template ./patterns/default.html --search-template ./patterns/search.html' && webpack serve --config ./webpack.config.js ./tests/webpack.tests.js --merge",
     "test": "echo \\\"Error: run tests from root\\\" && exit 0"
   },
   "repository": {
@@ -37,26 +39,18 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@wordpress/scripts": "^31.3.0",
     "css-minimizer-webpack-plugin": "^7.0.4",
+    "deepmerge": "^4.3.1",
+    "handlebars": "^4.7.8",
     "handlebars-loader": "^1.7.3",
     "html-format": "^1.1.7",
-    "html-webpack-link-type-plugin": "^1.1.1",
+    "html-webpack-plugin": "^5.6.6",
     "html-webpack-skip-assets-plugin": "^1.0.4",
-    "mini-css-extract-plugin": "^2.10.0",
-    "rtlcss-webpack-plugin": "^4.0.7",
     "thread-loader": "^4.0.4",
     "ts-loader": "^9.5.4",
     "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.3",
+    "webpack-merge": "^6.0.1",
     "webpack-remove-empty-scripts": "^1.1.1"
-  },
-  "peerDependencies": {
-    "@caweb/a11y-webpack-plugin": ">= 2.0.0",
-    "@caweb/css-audit-webpack-plugin": ">= 2.0.0",
-    "@caweb/html-webpack-plugin": ">= 2.0.0",
-    "@caweb/jshint-webpack-plugin": ">= 2.0.0",
-    "html-webpack-plugin": ">= 3.0.0 < 5.6.5"
-  },
-  "devDependencies": {
-    "webpack-cli": "^6.0.1"
   }
 }

package/tests/caweb.json

@@ -0,0 +1,54 @@
+{
+    "_comment": "This is a sample caweb.json configuration file for CAWebPublishing projects.",
+    "site": {
+        "domain": "http://localhost:9000",
+        "logo": "./media/logo.png",
+        "favicon": "./media/favicon.ico",
+        "header": {
+            "utility": {
+                "links": []
+            },
+            "nav": [
+                    {
+                        "label": "CAWebPublishing",
+                        "url": "https://caweb.cdt.ca.gov/",
+                        "sub":[]
+                    },
+                    {
+                        "label": "CDT",
+                        "url": "https://cdt.ca.gov/",
+                        "sub": [
+                            {
+                                "label": "Accessibility",
+                                "url": "https://caweb.cdt.ca.gov/accessibility-2/",
+                                "description": "Accessibility"
+                            }
+                        ]
+                    }
+            ]
+        },
+        "footer":{
+            "nav": [
+               {
+                    "label": "Accessibility",
+                    "url": "https://caweb.cdt.ca.gov/accessibility-2/"
+                }
+            ]
+        },
+        "social": {
+            "github": "https://github.com/CAWebPublishing/"
+        },
+        "google": {
+            "search": "<Google Custom Search ID>"
+        },
+        "alerts": [
+            {
+                "icon": "info",
+                "header": "Dev Notice:",
+                "msg": "To see more CAWebPublishing projects, visit our Github Organization.",
+                "url": "https://github.com/CAWebPublishing/",
+                "text": "Visit Github"
+            }
+        ]
+    }
+}

package/tests/webpack.tests.js

@@ -0,0 +1,106 @@
+/**
+ * These are tests for the CAWebPublishing Template
+ */
+
+/**
+ * External Dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import deepmerge from 'deepmerge';
+import Handlebars from 'handlebars';
+
+/**
+ * Internal Dependencies
+*/
+import { getArgVal } from '../lib/args.js';
+
+// this is the path to the current project directory
+const appPath = process.cwd();
+
+// this is the path to this current file
+const currentPath = path.dirname(fileURLToPath(import.meta.url));
+
+// we read the test data caweb.json file 
+let testCaweb = JSON.parse( fs.readFileSync( path.join(currentPath, 'caweb.json') ) );
+
+// we read the app caweb.json file if it exists
+let defaultCaweb = fs.existsSync( path.join(appPath, 'caweb.json') ) ? 
+JSON.parse(fs.readFileSync(path.join(appPath, 'caweb.json'))) 
+: {};
+
+// merge the two caweb.json files, with the project data taking precedence
+let caweb = deepmerge( testCaweb, defaultCaweb  );
+
+let templatePath = path.join(appPath, 'node_modules', '@caweb', 'template');
+let template = getArgVal( '--template', path.join(templatePath, 'patterns', 'default.html') );
+let searchTemplate = getArgVal( '--search-template', path.join(templatePath, 'patterns', 'search.html') );
+
+let scheme = getArgVal( '--scheme', 'oceanside' );
+let favicon = caweb?.site?.favicon ?? null;
+
+// // Additional pages directory
+let basePageDir = path.join(appPath, 'content', 'pages');
+
+let additionalPages = ! fs.existsSync( basePageDir ) ? [] :
+    fs.readdirSync( basePageDir, { withFileTypes: true, recursive: true } )
+        .filter( dirent => dirent.isFile() && (dirent.name.endsWith('.html') || dirent.name.endsWith('.handlebars')) )
+        .map( ( dirent ) => {
+
+            let fileTemplate = path.join( dirent.parentPath, dirent.name );
+            
+            // replace .html, uppercase the first letter of each word
+            // this is to make sure the title is readable
+            // and not just a file name
+            let title = dirent.name.replace('.html', '').replace(/\b\w/g, c => c.toUpperCase());
+            let content = fs.readFileSync( fileTemplate, 'utf-8' );
+            let data = {
+                ...caweb.site,
+                scheme
+            };
+            let compiler = Handlebars.compile( content );
+            let compiledContent = compiler(data);
+
+            return new HtmlWebpackPlugin({
+                template,
+                filename: dirent.name,
+                title,
+                templateParameters: {
+                    ...caweb.site, // we spread the site data found in the caweb.json file
+                    scheme,
+                    partial: compiledContent,
+                },
+
+            });
+        });
+
+export default {
+    plugins: [
+        // this plugin generates the main landing page using the template found in patterns/index.html
+        new HtmlWebpackPlugin({
+            template,
+            favicon,
+            templateParameters: {
+                ...caweb.site, // we spread the site data found in the caweb.json file
+                scheme ,
+            }
+        }),
+
+        // this plugin generates Search Results page using the template found in patterns/search.html
+        caweb?.site?.google?.search ? new HtmlWebpackPlugin({
+            template: searchTemplate,
+            favicon,
+            filename: 'serp.html',
+            title: 'Search Results Page',
+            templateParameters: {
+                ...caweb.site, // we spread the site data found in the caweb.json file
+                scheme 
+            },
+        }) : false,
+
+        // this plugin generates additional pages under content/pages directory using the template found in patterns/index.html
+        ...additionalPages
+    ].filter(Boolean)
+};

package/webpack.config.js

@@ -9,29 +9,33 @@
 /**
  * External Dependencies
  */
-import baseConfig from '@wordpress/scripts/config/webpack.config.js';
+// import baseConfig from '@wordpress/scripts/config/webpack.config.js';
+import baseConfig from './lib/webpack.wp.config.js';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
 // webpack plugins
-import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
+import { merge } from 'webpack-merge';
+// import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import RtlCssPlugin from 'rtlcss-webpack-plugin';
-import {HtmlWebpackSkipAssetsPlugin} from 'html-webpack-skip-assets-plugin';
-import {HtmlWebpackLinkTypePlugin} from 'html-webpack-link-type-plugin';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
+import {HtmlWebpackSkipAssetsPlugin} from 'html-webpack-skip-assets-plugin';
+// import RtlCssPlugin from 'rtlcss-webpack-plugin';
+// import {HtmlWebpackLinkTypePlugin} from 'html-webpack-link-type-plugin';
 
-import JSHintPlugin from '@caweb/jshint-webpack-plugin';
-import CSSAuditPlugin from '@caweb/css-audit-webpack-plugin';
-import A11yPlugin from '@caweb/a11y-webpack-plugin';
+// import JSHintPlugin from '@caweb/jshint-webpack-plugin';
+// import CSSAuditPlugin from '@caweb/css-audit-webpack-plugin';
+// import A11yPlugin from '@caweb/a11y-webpack-plugin';
 
 /**
  * Internal dependencies
- */
-import CAWebHTMLPlugin from '@caweb/html-webpack-plugin';
-import { error } from 'console';
+*/
+import { flags, flagExists, getArgVal, addFlag } from './lib/args.js';
+import handlebarsLoaderOptions from './lib/loader.js';
+import { addToServer, getServer, updateTarget } from './lib/server.js';
 
+// determine the webpack command
 const webpackCommand = 'build' === process.argv[2] ? 'build' : 'serve' ;
 
 // this is the path to this current file
@@ -40,260 +44,104 @@ const currentPath = path.dirname(fileURLToPath(import.meta.url));
 // this is the path to the current project directory
 const appPath = process.cwd();
 
-// flags can be passed via argv0 
-// we also add args from NODE_OPTIONS
-let flags = [].concat(
-  processArgs(process.argv),
-  processArgs(process.argv0.split(' ')),
-  processArgs(process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.split(' ') : []),
-)
-
-const cawebJson = fs.existsSync( path.join(appPath, 'caweb.json') ) ? 
+// we read the caweb.json file if it exists
+let caweb = fs.existsSync( path.join(appPath, 'caweb.json') ) ? 
   JSON.parse(fs.readFileSync(path.join(appPath, 'caweb.json'))) 
   : {};
 
-// we use the caweb.json file to determine the site domain
-if( cawebJson?.site?.domain ){
-  let siteDomain = new URL(cawebJson.site.domain);
-
-  // only add the flags if the site domain is not localhost
-  if( 'localhost' !== siteDomain.host ){
-    // we add the site domain to the flags
-    flags.push(
-      `--host`, siteDomain.host,
-      '--server-type', siteDomain.protocol.replace(':', ''),
-      '--port', '' !== siteDomain.port ? cawebJson.site.port : 80, // default port is 80
-    );
-  }
-}
-
-
-function processArgs( arr ){
-  let tmp = [];
-
-  arr.filter(Boolean).map((o) => {
-    return o.replaceAll("'", '').split('=').forEach((e => tmp.push(e)))
-  });
-
-  return tmp
-}
-
-function flagExists(flag){
-  return flags.includes(flag)
-}
-
-function getArgVal(flag){
-  return flagExists(flag) ? flags[flags.indexOf(flag) + 1] : false;
-}
-
-// Update some of the default WordPress webpack rules.
-baseConfig.module.rules.forEach((rule, i) => {
-  const r = new RegExp(rule.test).toString();
-
-  switch(r){
-    // WordPress adds a hash to asset file names we remove that hash.
-    case new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString():
-      rule.generator.filename = 'images/[name][ext]';
-      break;
-    case new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString():
-      rule.generator.filename = 'fonts/[name][ext]';
-      break;
-    case new RegExp(/\.svg$/).toString():
-      // we don't want SVG to be asset/inline otherwise the resource may not be available.
-      // the asset should be an asset/resource we move them to the fonts folder. 
-      if( 'asset/inline' === rule.type ){
-        rule.type = 'asset/resource';
-        rule.generator = { filename: 'fonts/[name][ext]' };
-
-        delete rule.issuer;
-      }
-      break;
-    // silence deprecation warnings from sass
-    case new RegExp(/\.(sc|sa)ss$/).toString():
-      rule.use[rule.use.length-1].options.sassOptions = {
-        silenceDeprecations: ['global-builtin', 'import', 'color-functions', 'if-function']
-      };
-      break;
-    case new RegExp(/\.m?(j|t)sx?$/).toString():
-      // @since @wordpress/scripts@30.20.0 babel-loader is used for js and ts files
-      
-      // Added the Transform class properties syntax plugin to the babel-loader.
-      // @see https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
-      rule.use[0].options.plugins.push('@babel/plugin-proposal-class-properties');
-
-      // we add thread-loader before the babel-loader
-      // Spawns multiple processes and split work between them. This makes faster build.
-      // @see https://webpack.js.org/loaders/thread-loader/
-      rule.use = [{
-        loader: 'thread-loader',
-        options: {
-          workers: -1,
-        },
-      }].concat(rule.use);        
-
-    break;
-  }
-});
+let mode = getArgVal('--mode') ? getArgVal('--mode') : baseConfig.mode;
+let isProduction = mode === 'production';
+let devServer = false;
 
 /**
- * we remove the WordPress devServer declaration since we can only have 1 when exporting multiple configurations
+ * DevServer is only added during 'serve' command
  * 
- * @see https://github.com/webpack/webpack-cli/issues/2408#issuecomment-793052542
+ * @see https://webpack.js.org/configuration/dev-server/
  */
-delete baseConfig.devServer;
-
-let customTemplateHelpers = [];
-
-// we allow the user to pass custom template helpers
+if( 'serve' === webpackCommand ){
+  // we use the caweb.json file to determine the site domain
+  if( caweb?.site?.domain ){
+    try {
+      let siteDomain = new URL(caweb.site.domain);
+
+      // only add the flags if the site domain is not localhost
+      if( 'localhost' !== siteDomain.hostname ){
+        addToServer( 'host', siteDomain.hostname );
+        addToServer( 'server', siteDomain.protocol.replace(':', '') );
+        
+        // only add the port if it is specified
+        if( '' !== siteDomain.port ){
+          addToServer( 'port', siteDomain.port );
+        }
 
-if( fs.existsSync(path.join(appPath, 'helpers'), {withFileTypes: true} ) ) {
-  // we add the helpers directory
-  customTemplateHelpers = [ path.join(appPath, 'helpers') ];
-  
-  // we add any subdirectories
-  fs.readdirSync(
-      path.join(
-        appPath, 'helpers'
-      ), 
-      {
-        withFileTypes: true, 
-        recursive: true
-      } 
-    )
-    .filter( Dirent => Dirent.isDirectory()  )
-    .map( Dirent => customTemplateHelpers.push( path.resolve(Dirent.parentPath, Dirent.name) ) )
+        updateTarget( siteDomain.href );
+      }
 
-} 
+    } catch (e) {
+      console.error(`\x1b[31mInvalid URL in caweb.json site.domain: ${caweb.site.domain}\x1b[0m`);
+      console.error( '\x1b[31mEnsure the domain is a valid URL, e.g., https://example.com\x1b[0m' )
+    }
+    
+  }
 
-// Wordpress ignores the webpack --mode flag
-// if the flag is passed we use that mode 
-// otherwise use whatever Wordpress is using
-let mode = getArgVal('--mode') ? getArgVal('--mode') : baseConfig.mode;
+  // get the dev server config
+  devServer = getServer();
+}
 
+// main webpack configuration object
 let webpackConfig = {
-  ...baseConfig,
   mode,
-  name: 'uncompressed',
-  target: 'web',
-  // Turn off caching of generated modules and chunks.
-  // @see https://webpack.js.org/configuration/cache/
-  cache: false,
-
-  stats: {
-    errors: true,
-  },
+  // target: 'web',
+  name: isProduction ? 'compressed' : 'uncompressed',
   
-  // Determine where the created bundles will be outputted.
-  // @see https://webpack.js.org/concepts/#output
-  output: {
-    ...baseConfig.output,
-    clean: mode === 'production',
-    pathinfo: false
+  /**
+   * Output Configuration
+   * @see https://webpack.js.org/configuration/output/
+  */
+ output: {
+   filename: isProduction ? '[name].min.js' : '[name].js',
+   chunkFilename: isProduction ? '[name].min.js?v=[chunkhash]' : '[name].js?v=[chunkhash]',
+   pathinfo: false,
+   clean: isProduction,
   },
-
-  performance: {
-    maxAssetSize: 500000,
-    maxEntrypointSize: 500000
+  
+  /**
+   * Resolve Configuration
+   * 
+   * @see https://webpack.js.org/configuration/resolve/
+   */
+  resolve: {
+    extensions: ['.js', '.json'],
   },
 
-  // Determine how modules are resolved.
-  // @see https://webpack.js.org/configuration/resolve/
-  resolve: {
-    // Allows extension to be leave off when importing.
-    // @see https://webpack.js.org/configuration/resolve/#resolveextensions
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '...'],
+  /**
+   * Optimization Configuration
+   * @see https://webpack.js.org/configuration/optimization/
+  */
+ optimization: {
+   minimize: isProduction,
+   minimizer: [
+     isProduction ? new CssMinimizerPlugin({test: /\.min\.css$/}) : false
+    ].filter(Boolean),
   },
 
   // This option determine how different types of module within the project will be treated.
   // @see https://webpack.js.org/configuration/module/
   module:{
-    ...baseConfig.module,
     // This option sets up loaders for webpack configuration.
     // Loaders allow webpack to process various types because by default webpack only
     // understand JavaScript and JSON files.
     // @see https://webpack.js.org/concepts/#loaders
     rules: [
-      ...baseConfig.module.rules,
       /**
        * Default template loader for html is lodash, 
-       * lets switch to handlebars
+       * lets switch to handlebars-loader
+       * @see https://github.com/pcardune/handlebars-loader
        */
       {
-        test: /\.html$/,
+        test: /\.(html|handlebars|hbs)$/,
         loader: 'handlebars-loader',
-        options:{
-          rootRelative: process.cwd(),
-          helperDirs: [
-            path.resolve(currentPath, 'helpers', 'bootstrap'),
-            path.resolve(currentPath, 'helpers', 'logic'),
-            path.resolve(currentPath, 'helpers', 'object'),
-            path.resolve(currentPath, 'helpers', 'string')
-          ].concat( customTemplateHelpers ),
-          partialResolver: function(partial, callback){
-            /**
-             * All template partials are loaded from the root directory
-             * if the file doesn't exist we fallback to our template partials
-             */
-            let fallbackPath = path.join( currentPath, '..', 'template' );
-            let partialDir = '';
-
-            // template parameter specific partials
-            switch( partial ){
-              /**
-               * Semantic elements are served from the /semantic/ directory
-               * 
-               * - header
-               * - footer
-               * 
-               * @link https://www.w3schools.com/html/html5_semantic_elements.asp
-               */
-              case 'branding':
-              case 'footer':
-              case 'header': 
-              case 'mobileControls': 
-              case 'navFooter':
-              case 'navHeader': 
-              case 'utilityHeader': 
-                partialDir = 'semantics';
-                break;
-
-              // content is served from the /content/ directory
-              case 'index': 
-              case 'content': 
-                partialDir = 'content';
-                break;
-
-              // components are served from the /components/ directory
-              case 'alert':
-              case 'card':
-                partialDir = `components/${partial}`;
-                break;
-              
-              // forms are served from the /forms/ directory
-              case 'searchForm':
-                partialDir = 'forms';
-                break;
-              
-              // tables are served from the /tables/ directory
-              case partial.includes('Table'):
-                partialDir = 'tables';
-                break;
-            }
-
-            if( partialDir ){
-                // we remove the Form from the name
-                // we remove the Table from the name
-                // we change the partial name from camelCase to dash-case
-                partial = partial.replace(/(Form|Table)/, '').replace(/([A-Z])/g, '-$1').toLowerCase();
-
-                partial = fs.existsSync( path.join( appPath, partialDir, `/${partial}.html` )) ? 
-                  path.join( appPath, partialDir, `/${partial}.html` ) :
-                  path.join( fallbackPath, partialDir, `/${partial}.html` )
-            }
-
-            callback(false, partial );
-          }
-        }
+        options: handlebarsLoaderOptions
       },
       // Handle `.tsx` and `.ts` files.
       {
@@ -311,6 +159,43 @@ let webpackConfig = {
       }
     ]
   },
+  
+  /**
+   * Devtool Configuration
+   * WordPress by default uses 'source-map' for devtool which affects build and rebuild speed.
+   * For development we switch to 'eval' which is much faster.
+   * For production we turn off devtool completely.
+   * @see https://webpack.js.org/configuration/devtool/#devtool
+   */
+  devtool: isProduction ? 'source-map' : 'eval',
+  
+  /**
+   * Turn off caching of generated modules and chunks.
+   * @see https://webpack.js.org/configuration/cache/
+   */
+  cache: false,
+
+  /**
+   * Stats Configuration
+   * @see https://webpack.js.org/configuration/stats/
+   */
+  stats: {
+    errors: true,
+    errorDetails: true,
+  },
+
+
+  /**
+   * Performance Configuration
+   * Throw hints when asset size exceeds the specified limit for production.
+   * 
+   * @see https://webpack.js.org/configuration/performance/
+   */
+  performance: {
+    maxAssetSize: 350000,
+    maxEntrypointSize: 500000,
+    hints: isProduction ? 'warning' : false,
+  },
 
   // WordPress already enqueues scripts and makes them available
   // in global scope so those scripts don't need to be included on the bundle. For webpack
@@ -329,190 +214,29 @@ let webpackConfig = {
     '@wordpress/hooks': ['vendor', 'wp', 'hooks'],
     '@wordpress/i18n': ['vendor', 'wp', 'i18n'],
   
-  }
-};
-
-/**
- * Serve Only
- */
-if( 'serve' === webpackCommand ){
-  let template = flags.includes('--template') ? getArgVal('--template') : 'default';
-  let scheme = flags.includes('--scheme') ? getArgVal('--scheme') : 'oceanside';
+  },
 
-  let host = flags.includes('--host') ? getArgVal('--host') : 'localhost';
-  let port = flags.includes('--port') ? getArgVal('--port') : 9000;
-  let server = flags.includes('--server-type') ? getArgVal('--server-type') : 'http';
+  plugins: [
+    // we remove empty scripts
+    new RemoveEmptyScriptsPlugin(),
 
-  // Dev Server is added
-  webpackConfig.devServer = { 
-    devMiddleware: {
-      writeToDisk: true,
-    },
-    hot: true,
-    compress: true,
-    allowedHosts: 'auto',
-    server,
-    host,
-    port,
-    open: [  `${server}://${host}:${port}` ],
-    static: [
-      /**
-       * Static files are served from the following files in the following order
-       * we don't have to add the build directory since that is the output.path and proxied
-       * 
-       * node_modules - Allows loading files from other npm packages
-       */
-      {
-        directory: path.join(appPath, 'node_modules'),
-      },
-      /**
-       * Static files are served from the following files in the following order
-       * we don't have to add the build directory since that is the output.path and proxied
-       * 
-       * node_modules - Allows loading files from other npm packages
-       */
-      {
-        directory: path.join(appPath, 'media'),
-      }
-    ],
-    proxy:[
-      /**
-       * WordPress Proxy Configuration is deprecated
-       * @since 28.2.0
-       */
-      {
-        context: ['/build'],
-        target: `${server}://${host}:${port}`,
-        pathRewrite: {
-          '^/build': ''
-        },
-        logLevel: 'info'
-      },
-      /**
-       * We proxy the node_modules and src so they serve from the root
-       */
-      {
-        context: ['/node_modules'],
-        target: `${server}://${host}:${port}`,
-        pathRewrite: { '^/node_modules': '' },
-      },
-      /**
-       * We proxy the node_modules and src so they serve from the root
-       */
-      {
-        context: ['/media'],
-        target: `${server}://${host}:${port}`,
-        pathRewrite: { '^/media': '' },
-      }
-    ]
-  }
-
-  // Page Template and additional plugins
-  webpackConfig.plugins.push(
-    new CAWebHTMLPlugin({
-      template,
-      templateParameters: {
-        scheme: 'false' !== scheme ? scheme : false 
-      },
+    // certain files can be skipped when serving
+    new HtmlWebpackSkipAssetsPlugin({
       skipAssets: [
-        /.*-rtl.css/, // we skip the Right-to-Left Styles
-        /css-audit.*/, // we skip the CSSAudit Files
-        /a11y.*/, // we skip the A11y Files
-        /jshint.*/, // we skip the JSHint Files
-      ]
+          /.*-rtl.css/, // we skip the Right-to-Left Styles
+          /css-audit.*/, // we skip the CSSAudit Files
+          /a11y.*/, // we skip the A11y Files
+          /jshint.*/, // we skip the JSHint Files
+        ]
     }),
-    new HtmlWebpackSkipAssetsPlugin(),
-    new HtmlWebpackLinkTypePlugin(),
-    ! flagExists('--no-jshint') ? new JSHintPlugin() : false,
-    ! flagExists('--no-audit') ? new CSSAuditPlugin() : false,
-    ! flagExists('--no-a11y') ? new A11yPlugin() : false
-  )
-
-  // we add the SERP (Search Engine Results Page)
-  // if the caweb.json has a google search id
-  if( cawebJson.site?.google?.search ){
-      webpackConfig.plugins.push(
-        new CAWebHTMLPlugin({
-          template: 'search',
-          templateParameters: {
-            scheme: 'false' !== scheme ? scheme : false
-          },
-          filename: 'serp.html',
-          title: 'Search Results Page',
-          skipAssets: [
-            /.*-rtl.css/, // we skip the Right-to-Left Styles
-            /css-audit.*/, // we skip the CSSAudit Files
-            /a11y.*/, // we skip the A11y Files
-            /jshint.*/, // we skip the JSHint Files
-          ]
-        })
-      )
-  }
+  ],
   
-  // we add any additional pages
-  let basePageDir = path.join(appPath, 'content', 'pages');
-  if( fs.existsSync(basePageDir, {withFileTypes: true} ) ) {
-    fs.readdirSync(
-      basePageDir, 
-      { withFileTypes: true, recursive: true }
-    )
-    .filter( Dirent => Dirent.isFile() && Dirent.name.endsWith('.html') )
-    .map( Dirent => {
-      let fileTemplate = path.join(Dirent.parentPath, Dirent.name);
-      let p = fs.readFileSync( fileTemplate ).toString();
-      let fileName = fileTemplate.replace(basePageDir, '');
-
-      webpackConfig.plugins.push(
-        new CAWebHTMLPlugin({
-          template,
-          filename: fileName,
-          // replace .html, forward slashes with a space, uppercase the first letter of each word, remove Index
-          // this is to make sure the title is readable
-          // and not just a file name
-          title: fileName.replace(/\.html$/, '').replace(/[\/\\]/g, ' ').replace(/\b\w/g, c => c.toUpperCase()).replace(' Index', ''),
-          templateParameters: {
-            bodyHtmlSnippet: p,
-          },
-          skipAssets: [
-            /.*-rtl.css/, // we skip the Right-to-Left Styles
-            /css-audit.*/, // we skip the CSSAudit Files
-            /a11y.*/, // we skip the A11y Files
-            /jshint.*/, // we skip the JSHint Files
-          ]
-        })
-      )
-    });
-  }
-}
-
-/**
- * Production only
- */
-if( mode === 'production' ){
-  // Config
-  webpackConfig.name = 'compressed';
-  webpackConfig.devtool = false;
-
-  // Output
-  webpackConfig.output.filename = '[name].min.js';
-  webpackConfig.output.chunkFilename = '[name].min.js?v=[chunkhash]';
-  
-  // Plugins
-  webpackConfig.plugins.push(
-    new MiniCSSExtractPlugin( { filename: '[name].min.css' } ),
-    new RtlCssPlugin( { filename: '[name]-rtl.min.css' } )
-  )
-
-  // Optimization
-  webpackConfig.optimization.minimize = true;
-  webpackConfig.optimization.minimizer.push(
-    new CssMinimizerPlugin({test: /\.min\.css$/})
-  )
-}
-
-// we remove empty scripts
-webpackConfig.plugins.push(
-  new RemoveEmptyScriptsPlugin()
-);
+  /**
+   * DevServer is only added during 'serve' command
+   * 
+   * @see https://webpack.js.org/configuration/dev-server/
+   */
+  devServer
+};
 
-export default webpackConfig;
+export default merge( baseConfig, webpackConfig );