@caweb/webpack 1.6.8 → 1.7.0

package/lib/args.js

@@ -15,11 +15,13 @@ let argv0 = process.argv0.replace(/.*node[.a-z\s]*/, '');
 
 // flags can be passed via argv0 
 // we also add args from NODE_OPTIONS
+// we also add args from CAWEB_NODE_OPTIONS
 let { values: flags } = parseArgs( {
     args: [
         ...argv,
         ...argv0.split(' '),
-        ...(process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.trim().replace(/(^'|'$)/g, '').split(' ') : []).filter( Boolean )
+        ...(process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.trim().replace(/(^'|'$)/g, '').split(' ') : []).filter( Boolean ),
+        ...(process.env.CAWEB_NODE_OPTIONS ? process.env.CAWEB_NODE_OPTIONS.trim().replace(/(^'|'$)/g, '').split(' ') : []).filter( Boolean )
     ].filter( Boolean ),
     strict: false,
     allowPositionals: true,

package/lib/utils.js

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import { validate } from 'schema-utils';
+import path, { join, sep, dirname } from 'path';
+import { existsSync, realpathSync, readFileSync } from 'fs';
+import { readPackageUp } from 'read-package-up';
+import FastGlob from 'fast-glob';
+
+
+/**
+ * Internal dependencies
+ */
+const { sync: glob } = FastGlob;
+
+const { warn } = console;
+
+const { packageJson, path: pkgPath } = await readPackageUp({cwd: realpathSync( process.cwd() ) });
+
+const moduleFields = new Set( [ 'viewScriptModule', 'viewModule' ] );
+
+const scriptFields = new Set( [ 'viewScript', 'script', 'editorScript' ] );
+
+const hasProjectFile = ( fileName ) =>
+	existsSync( fromProjectRoot( fileName ) )
+
+const fromProjectRoot = ( fileName ) =>
+	path.join( path.dirname( getPackagePath() ), fileName )
+
+const getPackagePath = () => pkgPath
+
+function getProjectSourcePath() {
+	return process.env.WP_SOURCE_PATH || 'src';
+}
+
+function getBlockJsonScriptFields( blockJson ) {
+	let result = null;
+	for ( const field of scriptFields ) {
+		if ( Object.hasOwn( blockJson, field ) ) {
+			if ( ! result ) {
+				result = {};
+			}
+			result[ field ] = blockJson[ field ];
+		}
+	}
+	return result;
+}
+
+function getBlockJsonModuleFields( blockJson ) {
+	let result = null;
+	for ( const field of moduleFields ) {
+		if ( Object.hasOwn( blockJson, field ) ) {
+			if ( ! result ) {
+				result = {};
+			}
+			result[ field ] = blockJson[ field ];
+		}
+	}
+	return result;
+}
+
+function getPhpFilePaths( context, props ) {
+	// Continue only if the source directory exists.
+	if ( ! hasProjectFile( context ) ) {
+		return [];
+	}
+
+	// Checks whether any block metadata files can be detected in the defined source directory.
+	const blockMetadataFiles = glob( '**/block.json', {
+		absolute: true,
+		cwd: fromProjectRoot( context ),
+	} );
+
+	const srcDirectory = fromProjectRoot( context + sep );
+
+	return blockMetadataFiles.flatMap( ( blockMetadataFile ) => {
+		const paths = [];
+		let parsedBlockJson;
+		try {
+			parsedBlockJson = JSON.parse( readFileSync( blockMetadataFile ) );
+		} catch ( error ) {
+			warn(
+				`Not scanning "${ blockMetadataFile.replace(
+					fromProjectRoot( sep ),
+					''
+				) }" due to detect render files due to malformed JSON.`
+			);
+			return paths;
+		}
+
+		for ( const prop of props ) {
+			if (
+				typeof parsedBlockJson?.[ prop ] !== 'string' ||
+				! parsedBlockJson[ prop ]?.startsWith( 'file:' )
+			) {
+				continue;
+			}
+
+			// Removes the `file:` prefix.
+			const filepath = join(
+				dirname( blockMetadataFile ),
+				parsedBlockJson[ prop ].replace( 'file:', '' )
+			);
+
+			// Takes the path without the file extension, and relative to the defined source directory.
+			if ( ! filepath.startsWith( srcDirectory ) ) {
+				warn(
+					`Skipping "${ parsedBlockJson[ prop ].replace(
+						'file:',
+						''
+					) }" listed in "${ blockMetadataFile.replace(
+						fromProjectRoot( sep ),
+						''
+					) }". File is located outside of the "${ context }" directory.`
+				);
+				continue;
+			}
+			paths.push( filepath.replace( /\\/g, '/' ) );
+		}
+		return paths;
+	} );
+}
+
+const phpFilePathsPluginSchema = {
+	type: 'object',
+	properties: {
+		context: {
+			type: 'string',
+		},
+		props: {
+			type: 'array',
+			items: {
+				type: 'string',
+			},
+		},
+	},
+};
+
+/**
+ * The plugin recomputes PHP file paths once on each compilation. It is necessary to avoid repeating processing
+ * when filtering every discovered PHP file in the source folder. This is the most performant way to ensure that
+ * changes in `block.json` files are picked up in watch mode.
+ */
+class PhpFilePathsPlugin {
+	/**
+	 * PHP file paths from `render` and `variations` props found in `block.json` files.
+	 *
+	 * @type {string[]}
+	 */
+	static paths;
+
+	constructor( options = {} ) {
+		validate( phpFilePathsPluginSchema, options, {
+			name: 'PHP File Paths Plugin',
+			baseDataPath: 'options',
+		} );
+
+		this.options = options;
+	}
+
+	apply( compiler ) {
+		const pluginName = this.constructor.name;
+
+		compiler.hooks.thisCompilation.tap( pluginName, () => {
+			this.constructor.paths = getPhpFilePaths(
+				this.options.context,
+				this.options.props
+			);
+		} );
+	}
+}
+
+export { PhpFilePathsPlugin, getBlockJsonScriptFields, getBlockJsonModuleFields, fromProjectRoot, getProjectSourcePath };

package/lib/webpack.wp.configurator.js

@@ -0,0 +1,339 @@
+/**
+ * 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 fs from 'fs';
+import path from 'path';
+import * as prettier from 'prettier';
+
+/**
+ * Internal dependencies
+ */
+
+let output = [];
+
+// 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():
+      // The postcss-loader is the 3rd loader
+      rule.use[2].options.postcssOptions.plugins = 'postcssPlugins'
+      // The sass-loader is last
+      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-transform-class-properties
+      rule.use[0].options.plugins.push('@babel/plugin-transform-class-properties');
+      delete rule.use[0].options.cacheDirectory;
+      delete rule.use[0].options.configFile;
+      delete rule.use[0].options.babelrc;
+
+      // this one only applies if hasReactFastRefresh and we are serving
+      rule.use[0].options.plugins.push('react-refresh/babel');
+
+      // 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.
+// when importing the base configuration, the plugins are already instantiated so we have to loop through them and modify the options of the instantiated plugins.
+baseConfig.plugins = baseConfig.plugins.map((plugin, i) => {
+  const pluginName = plugin.constructor.name;
+  
+  switch(pluginName){
+    case 'MiniCssExtractPlugin':
+      // we only need the filename
+      delete plugin.options.ignoreOrder;
+      delete plugin.options.runtime;
+      delete plugin.options.experimental;
+      delete plugin.options.experimentalUseImportModule;
+      
+      break;
+      case 'DefinePlugin':
+        Object.entries(plugin.definitions).forEach( ([d, n]) => { 
+          // these are booleans but come in as strings, so we set them again so they are boolean
+          plugin.definitions[d] = ('true' === n)
+        }) 
+        break;
+    case 'RtlCssPlugin':
+      // we disable the RTL CSS generation we don't need them 
+      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;
+
+// Serialize all the data from webpack config and saves it to the output array
+// this is the last chance to make any changes and some changes have to be made here otherwise prettier will fail to format the code correctly.
+const serializeData = ( data ) => {
+  Object.entries(data).forEach(([k, v]) => {
+      // if the key is not a number, set it as the property key
+      // if the key has a dash it has to be wrapped in quotes
+      let key = Number.isNaN(Number(k)) ? (k.includes('-') || k.includes('.') ? `'${k}':` : `${k}:`) : '';
+
+      // if the key is blank then the value is being used in an array.
+      let isInArray = ! key.length;
+
+      switch( typeof v ){
+        case 'string':
+          v = v.match(/(browserslist:)?.*\/node_modules\/(@wordpress\/)?([\w-]+)\/.*/g) ?
+            v.replace(/(browserslist:)?.*\/node_modules\/(@wordpress\/)?([\w-]+)\/.*/g, '$1$2$3') : v;
+
+          if(v.startsWith('browserslist:')){
+            v = "browserslist.findConfig( '.' ) ? browserslist.findConfig( '.' ) : 'browserslist:extends @wordpress/browserslist-config'";
+          } else if ( 'path' === k ){
+            // since we want it to be dynamic based on where the user is running the webpack command
+            v = "resolve( process.cwd(), 'build' )";
+            // this is the filename for the MiniCssExtractPlugin which needs to be modified to match the mode
+          } else if ( 'filename' === k && v.endsWith('.css') ){
+            v = 'isProduction ? \'[name].min.css\' : \'[name].css\''
+          } else if( 'mini-css-extract-plugin' === v ){
+            v = 'MiniCssExtractPlugin.loader';
+          // all of these values can be wrapped in a require.resolve since they are all packages that need to be resolved
+          } else if( 
+            '@wordpress/babel-preset-default' === v ||
+            'react-refresh/babel' === v ||
+            [ 'loader', 'use', 'target' ].includes(k)
+          ){
+            v = `require.resolve( '${v}' )`;
+
+          } else if ('postcssPlugins' === v ){
+            // we don't have to do anything, we just dont need it wrapped in quotes sinces its a constant.
+          }else{
+            // all other string values should be wrapped in quotes
+            v = `'${v}'`;
+            
+          }
+        case 'boolean':
+        case 'number':
+
+          // push to output
+          output.push(`${ key } ${v}`);
+          break;
+        case 'object':
+            // if the value is a regex
+            if( v instanceof RegExp ){
+              output.push(`${key}${v}`)
+            // if the value is a boolean
+            }else if ( v instanceof Boolean ){
+              output.push(`${key}${v}`)
+  
+            // if the value is an array
+            }else if( v instanceof Array ){
+              output.push(`${key}[`)
+              serializeData(v);
+              output.push(`]`)
+  
+            // if the constructor name is not Object or Array, assume it a class
+            // these are usually plugins used in the configurations
+            } else if ( ! ['Object', 'Array'].includes( v.constructor.name ) ){
+              // the DefinePlugin is part of the webpack package not a standalone plugin
+              // so if the plugin is DefinePlugin we prefix the name with webpack.
+              let pluginName = 'DefinePlugin' !== v.constructor.name ? v.constructor.name :`webpack.${v.constructor.name}`;
+
+              let config = {};
+
+              // each plugin has a different configuration 
+              switch( pluginName ){
+                case 'webpack.DefinePlugin':
+                  config = v.definitions;
+                  break;
+                case 'TerserPlugin':
+                  // the terserplugin does not need the minimizer, test option, but is missing the terserOptions
+                  delete v.options.minimizer;
+                  delete v.options.test;
+
+                  // add the terserOptions
+                  v.options.terserOptions = {
+                    output: {
+                      comments: /translators:/i,
+                    },
+                    compress: {
+                      passes: 2,
+                    },
+                    mangle: {
+                      reserved: [ '__', '_n', '_nx', '_x' ],
+                    },
+                  }
+                case 'PhpFilePathsPlugin':
+                case 'MiniCssExtractPlugin':
+                  config = v.options;
+                  break;
+                case 'ReactRefreshPlugin': // this is the ReactRefreshWebpackPlugin
+                  pluginName = 'ReactRefreshWebpackPlugin';
+                  break;
+                case 'CopyPlugin': // this is the CopyWebpackPlugin
+                  pluginName = 'CopyWebpackPlugin'
+                  config = v;
+                
+              }
+  
+              // if the plugin has configurations
+              if( Object.keys(config).length ){
+                
+                output.push(`new ${pluginName}({`)
+                serializeData( config );
+                output.push('})')
+              }else{
+
+                // DependencyExtractionWebpackPlugin
+                if( 'DependencyExtractionWebpackPlugin' === pluginName ){
+                  output.push( `externals && new ${pluginName}()` );
+                }else {
+                  output.push(`new ${pluginName}()`)
+                }
+              }
+
+  
+            }else{
+              output.push(`${key} {`)
+              serializeData(v);
+              output.push(`}`)
+            }
+          break;
+        case 'function':
+          // these functions can just be executed
+          if( 'entry' === k ){
+            output.push(`${key}${JSON.stringify(v('script'))}`);
+          }else if( ['name', 'transform'].includes(k) ) {
+            output.push(v.toString());
+          }else if( ['implementation', 'filter'].includes(k) ){
+            output.push( `${key}${v.toString()}` )
+          }
+          break;
+      }
+  })
+}
+
+// header information for the output file
+let header = `/**\n * This file is autogenerated and should not be modified.
+ * Last modified: ${ new Date().toString()}\n */`;
+
+// Imports that have to be included
+let imports = Object.entries({
+  'CopyWebpackPlugin': 'copy-webpack-plugin',
+  'webpack': 'webpack',
+  'browserslist': 'browserslist',
+  'MiniCssExtractPlugin': 'mini-css-extract-plugin',
+  '{basename, dirname, relative, resolve, sep}': 'path',
+  'TerserPlugin': 'terser-webpack-plugin',
+  '{ realpathSync }': 'fs',
+  'DependencyExtractionWebpackPlugin': '@wordpress/dependency-extraction-webpack-plugin',
+  'postcssPlugins': '@wordpress/postcss-plugins-preset',
+  '{ createRequire }': 'module',
+  '{ getArgVal }': './lib/args.js',
+  '{PhpFilePathsPlugin, getBlockJsonScriptFields, getBlockJsonModuleFields, fromProjectRoot, getProjectSourcePath}': './lib/utils.js',
+}).map(([p, r]) => `import ${p} from '${r}';`).filter(Boolean).join('\n');
+
+let constants = Object.entries({
+  'isProduction': "getArgVal('mode', 'development') === 'production'",
+  'hasReactFastRefresh': '! isProduction',
+  'require': 'createRequire(import.meta.url)',
+  'externals': 'getArgVal("externals", true)',
+}).map(([p, r]) => `const ${p} = ${r};`).filter(Boolean).join('\n');
+
+// start data serialization
+serializeData( baseConfig );
+
+// if an object was created we replace the leading comma that is created when joining the output
+let formattedCode = await prettier.format(
+  `${header}
+  ${imports}\n
+  ${constants}\n
+  export default {${output.join(',').replace(/([{[(]),/g, '$1')}}`,
+  {
+    filepath: '.prettierrc.js'
+  }
+)
+
+// we write this modified webpack config to the root
+fs.writeFileSync( path.resolve('.', 'webpack.wp.config.js'), formattedCode );
+
+// we create one utility file that will contain only the necessary @wordpress/scripts/utils functions/classes used
+import { getPhpFilePaths, hasProjectFile, fromProjectRoot, getBlockJsonScriptFields, getBlockJsonModuleFields, getProjectSourcePath } from '@wordpress/scripts/utils/index.js';
+import { getPackagePath } from '@wordpress/scripts/utils/package.js';
+
+// we read the phpFilePathsPlugin file and replace the require statements into import statements since we want to write it as an ES module
+let phpFilePathsPlugin = fs.readFileSync(
+  path.resolve('.', 'node_modules', '@wordpress', 'scripts', 'plugins', 'php-file-paths-plugin', 'index.js')
+)
+.toString()
+.replace("const { validate } = require( 'schema-utils' );", 
+  [
+    "import { validate } from 'schema-utils';",
+    "import path, { join, sep, dirname } from 'path';",
+    "import { existsSync, realpathSync, readFileSync } from 'fs';",
+    "import { readPackageUp } from 'read-package-up';",
+    "import FastGlob from 'fast-glob';\n",
+  ].join('\n')
+)
+.replace("const { getPhpFilePaths } = require( '../../utils' );", [
+  'const { sync: glob } = FastGlob;',
+  'const { warn } = console;',
+  'const { packageJson, path: pkgPath } = await readPackageUp({cwd: realpathSync( process.cwd() ) });',
+  "const moduleFields = new Set( [ 'viewScriptModule', 'viewModule' ] );",
+  "const scriptFields = new Set( [ 'viewScript', 'script', 'editorScript' ] );",
+  `const hasProjectFile = ${hasProjectFile.toString()}`,
+  `const fromProjectRoot = ${fromProjectRoot.toString()}`,
+  `const getPackagePath = ${getPackagePath.toString()}`,
+  getProjectSourcePath.toString(),
+  getBlockJsonScriptFields.toString(),
+  getBlockJsonModuleFields.toString(),
+  getPhpFilePaths.toString(),
+].join('\n\n'))
+.replace("module.exports = PhpFilePathsPlugin", "export { PhpFilePathsPlugin, getBlockJsonScriptFields, getBlockJsonModuleFields, fromProjectRoot, getProjectSourcePath }")
+
+// we write this modified plugin to the lib/utils.js folder
+fs.writeFileSync( path.resolve('.', 'lib', 'utils.js' ), phpFilePathsPlugin );
+
+export default baseConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "description": "CAWebPublishing Webpack Configuration",
   "main": "webpack.config.js",
   "files": [
@@ -8,13 +8,15 @@
     "lib",
     "tests",
     "webpack.config.js",
+    "webpack.wp.config.js",
     "tsconfig.json"
   ],
   "type": "module",
   "scripts": {
     "webpack": "webpack",
+    "gen:wp": "node lib/webpack.wp.configurator.js",
     "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:serve": "cross-env CAWEB_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": {
@@ -36,15 +38,27 @@
   },
   "homepage": "https://github.com/CAWebPublishing/webpack#readme",
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@wordpress/scripts": "^31.4.0",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@wordpress/babel-preset-default": "^8.40.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.40.0",
+    "@wordpress/postcss-plugins-preset": "^5.40.0",
+    "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.4",
     "css-minimizer-webpack-plugin": "^7.0.4",
     "deepmerge": "^4.3.1",
+    "fast-glob": "^3.3.3",
     "handlebars": "^4.7.8",
     "handlebars-loader": "^1.7.3",
     "html-format": "^1.1.7",
     "html-webpack-plugin": "^5.6.6",
-    "html-webpack-skip-assets-plugin": "^1.0.4",
+    "mini-css-extract-plugin": "^2.10.0",
+    "postcss-loader": "^8.2.1",
+    "react-refresh": "^0.18.0",
+    "read-package-up": "^12.0.0",
+    "sass": "^1.97.3",
+    "sass-loader": "^16.0.7",
+    "source-map-loader": "^5.0.0",
     "thread-loader": "^4.0.4",
     "ts-loader": "^9.5.4",
     "webpack": "^5.105.2",
@@ -52,5 +66,14 @@
     "webpack-dev-server": "^5.2.3",
     "webpack-merge": "^6.0.1",
     "webpack-remove-empty-scripts": "^1.1.1"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^31.5.0",
+    "cross-env": "^10.1.0",
+    "prettier": "^3.8.1"
+  },
+  "overrides": {
+    "minimatch": "^10.2.4",
+    "webpack-dev-server": "^5.2.3"
   }
 }

package/webpack.config.js

@@ -9,24 +9,16 @@
 /**
  * External Dependencies
  */
-// import baseConfig from '@wordpress/scripts/config/webpack.config.js';
-import baseConfig from './lib/webpack.wp.config.js';
+import baseConfig from './webpack.wp.config.js';
+
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
 // webpack plugins
 import { merge } from 'webpack-merge';
-// import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-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';
 
 /**
  * Internal dependencies
@@ -49,7 +41,7 @@ let caweb = fs.existsSync( path.join(appPath, 'caweb.json') ) ?
   JSON.parse(fs.readFileSync(path.join(appPath, 'caweb.json'))) 
   : {};
 
-let mode = getArgVal('--mode') ? getArgVal('--mode') : baseConfig.mode;
+let mode = getArgVal('mode', 'development');
 let isProduction = mode === 'production';
 let devServer = false;
 
@@ -102,7 +94,8 @@ let webpackConfig = {
    filename: isProduction ? '[name].min.js' : '[name].js',
    chunkFilename: isProduction ? '[name].min.js?v=[chunkhash]' : '[name].js?v=[chunkhash]',
    pathinfo: false,
-   clean: isProduction
+   clean: isProduction,
+   path: path.resolve( process.cwd(), 'build' )
   },
   
   /**
@@ -164,7 +157,6 @@ 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',
@@ -221,14 +213,14 @@ let webpackConfig = {
     new RemoveEmptyScriptsPlugin(),
 
     // 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
-        ]
-    }),
+    // 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
+    //     ]
+    // }),
   ],
   
   /**

package/webpack.wp.config.js

@@ -0,0 +1,295 @@
+/**
+ * This file is autogenerated and should not be modified.
+ * Last modified: Thu Feb 26 2026 08:36:43 GMT-0800 (Pacific Standard Time)
+ */
+import CopyWebpackPlugin from "copy-webpack-plugin";
+import webpack from "webpack";
+import browserslist from "browserslist";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { basename, dirname, relative, resolve, sep } from "path";
+import TerserPlugin from "terser-webpack-plugin";
+import { realpathSync } from "fs";
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+import postcssPlugins from "@wordpress/postcss-plugins-preset";
+import { createRequire } from "module";
+import { getArgVal } from "./lib/args.js";
+import {
+  PhpFilePathsPlugin,
+  getBlockJsonScriptFields,
+  getBlockJsonModuleFields,
+  fromProjectRoot,
+  getProjectSourcePath,
+} from "./lib/utils.js";
+
+const isProduction = getArgVal("mode", "development") === "production";
+const hasReactFastRefresh = !isProduction;
+const require = createRequire(import.meta.url);
+const externals = getArgVal("externals", true);
+
+export default {
+  mode: "development",
+  target: browserslist.findConfig(".")
+    ? browserslist.findConfig(".")
+    : "browserslist:extends @wordpress/browserslist-config",
+  output: {
+    filename: "[name].js",
+    chunkFilename: "[name].js?ver=[chunkhash]",
+    path: resolve(process.cwd(), "build"),
+    clean: { keep: /^(fonts|images)\// },
+  },
+  resolve: {
+    alias: { "lodash-es": "lodash" },
+    extensions: [".jsx", ".ts", ".tsx", "..."],
+  },
+  optimization: {
+    concatenateModules: false,
+    runtimeChunk: false,
+    splitChunks: {
+      cacheGroups: {
+        style: {
+          type: "css/mini-extract",
+          test: /[\\/]style(\.module)?\.(pc|sc|sa|c)ss$/,
+          chunks: "all",
+          enforce: true,
+          name(_, chunks, cacheGroupKey) {
+            const chunkName = chunks[0].name;
+            return `${dirname(
+              chunkName,
+            )}/${cacheGroupKey}-${basename(chunkName)}`;
+          },
+        },
+        default: false,
+      },
+    },
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+        parallel: true,
+        terserOptions: {
+          output: { comments: /translators:/i },
+          compress: { passes: 2 },
+          mangle: { reserved: ["__", "_n", "_nx", "_x"] },
+        },
+      }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)sx?$/,
+        exclude: [/node_modules/],
+        use: require.resolve("source-map-loader"),
+        enforce: "pre",
+      },
+      {
+        test: /\.m?(j|t)sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve("thread-loader"),
+            options: { workers: -1 },
+          },
+          {
+            loader: require.resolve("babel-loader"),
+            options: {
+              presets: [require.resolve("@wordpress/babel-preset-default")],
+              plugins: [
+                "@babel/plugin-transform-class-properties",
+                require.resolve("react-refresh/babel"),
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: require.resolve("css-loader"),
+            options: {
+              importLoaders: 1,
+              sourceMap: true,
+              modules: { auto: true },
+            },
+          },
+          {
+            loader: require.resolve("postcss-loader"),
+            options: {
+              postcssOptions: {
+                ident: "postcss",
+                sourceMap: true,
+                plugins: postcssPlugins,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.pcss$/,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: require.resolve("css-loader"),
+            options: {
+              importLoaders: 1,
+              sourceMap: true,
+              modules: { auto: true },
+            },
+          },
+          {
+            loader: require.resolve("postcss-loader"),
+            options: {
+              postcssOptions: {
+                ident: "postcss",
+                sourceMap: true,
+                plugins: postcssPlugins,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(sc|sa)ss$/,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: require.resolve("css-loader"),
+            options: {
+              importLoaders: 1,
+              sourceMap: true,
+              modules: { auto: true },
+            },
+          },
+          {
+            loader: require.resolve("postcss-loader"),
+            options: {
+              postcssOptions: {
+                ident: "postcss",
+                sourceMap: true,
+                plugins: postcssPlugins,
+              },
+            },
+          },
+          {
+            loader: require.resolve("sass-loader"),
+            options: {
+              sourceMap: true,
+              sassOptions: {
+                silenceDeprecations: [
+                  "global-builtin",
+                  "import",
+                  "color-functions",
+                  "if-function",
+                ],
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        issuer: /\.(j|t)sx?$/,
+        use: ["@svgr/webpack", "url-loader"],
+        type: "javascript/auto",
+      },
+      {
+        test: /\.svg$/,
+        type: "asset/resource",
+        generator: { filename: "fonts/[name][ext]" },
+      },
+      {
+        test: /\.(bmp|png|jpe?g|gif|webp)$/i,
+        type: "asset/resource",
+        generator: { filename: "images/[name][ext]" },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+        generator: { filename: "fonts/[name][ext]" },
+      },
+    ],
+  },
+  stats: { children: false },
+  devtool: "source-map",
+  entry: {},
+  plugins: [
+    new webpack.DefinePlugin({
+      "globalThis.SCRIPT_DEBUG": true,
+      SCRIPT_DEBUG: true,
+    }),
+    new PhpFilePathsPlugin({ context: "src", props: ["render", "variations"] }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "**/block.json",
+          context: "src",
+          noErrorOnMissing: true,
+          transform(content, absoluteFrom) {
+            const convertExtension = (path) => {
+              return path.replace(/\.m?(j|t)sx?$/, ".js");
+            };
+
+            if (basename(absoluteFrom) === "block.json") {
+              const blockJson = JSON.parse(content.toString());
+
+              [
+                getBlockJsonScriptFields(blockJson),
+                getBlockJsonModuleFields(blockJson),
+              ].forEach((fields) => {
+                if (fields) {
+                  for (const [key, value] of Object.entries(fields)) {
+                    if (Array.isArray(value)) {
+                      blockJson[key] = value.map(convertExtension);
+                    } else if (typeof value === "string") {
+                      blockJson[key] = convertExtension(value);
+                    }
+                  }
+                }
+              });
+
+              if (hasReactFastRefresh) {
+                // Prepends the file reference to the shared runtime chunk to every script type defined for the block.
+                const runtimePath = relative(
+                  dirname(absoluteFrom),
+                  fromProjectRoot(getProjectSourcePath() + sep + "runtime.js"),
+                );
+                const fields = getBlockJsonScriptFields(blockJson);
+                for (const [fieldName] of Object.entries(fields)) {
+                  blockJson[fieldName] = [
+                    `file:${runtimePath}`,
+                    ...(Array.isArray(blockJson[fieldName])
+                      ? blockJson[fieldName]
+                      : [blockJson[fieldName]]),
+                  ];
+                }
+              }
+
+              return JSON.stringify(blockJson, null, 2);
+            }
+
+            return content;
+          },
+        },
+        {
+          from: "**/*.php",
+          context: "src",
+          noErrorOnMissing: true,
+          filter: (filepath) => {
+            return (
+              process.env.WP_COPY_PHP_FILES_TO_DIST ||
+              PhpFilePathsPlugin.paths.includes(
+                realpathSync(filepath).replace(/\\/g, "/"),
+              )
+            );
+          },
+        },
+      ],
+      options: {},
+    }),
+    new MiniCssExtractPlugin({
+      filename: isProduction ? "[name].min.css" : "[name].css",
+    }),
+    externals && new DependencyExtractionWebpackPlugin(),
+  ],
+};

package/lib/webpack.wp.config.js

@@ -1,99 +0,0 @@
-/**
- * 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;