@caweb/webpack 1.5.7 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "CAWebPublishing Webpack Configuration",
   "main": "webpack.config.js",
   "files": [
@@ -37,6 +37,7 @@
   },
   "homepage": "https://github.com/CAWebPublishing/webpack#readme",
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@wordpress/scripts": "^30.20.0",
     "css-minimizer-webpack-plugin": "^7.0.2",
     "handlebars-loader": "^1.7.3",
@@ -45,6 +46,8 @@
     "html-webpack-skip-assets-plugin": "^1.0.4",
     "mini-css-extract-plugin": "^2.9.2",
     "rtlcss-webpack-plugin": "^4.0.7",
+    "thread-loader": "^4.0.2",
+    "ts-loader": "^9.5.4",
     "webpack": "^5.102.1",
     "webpack-dev-server": "^5.2.2",
     "webpack-remove-empty-scripts": "^1.1.1"

package/webpack.config.js

@@ -107,18 +107,33 @@ baseConfig.module.rules.forEach((rule, i) => {
         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']
       };
       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;
   }
 });
 
-// we remove the WordPress CleanWebpackPlugin definition
-// instead we use the Webpack output.clean definition
-baseConfig.plugins.splice(1,1, false);
-
 /**
  * we remove the WordPress devServer declaration since we can only have 1 when exporting multiple configurations
  * 
@@ -280,8 +295,16 @@ let webpackConfig = {
       // Handle `.tsx` and `.ts` files.
       {
         test: /\.tsx?$/,
-        use: 'ts-loader',
         exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              happyPackMode: true,
+              transpileOnly: true,
+            }
+          }
+        ],
       }
     ]
   },
@@ -293,11 +316,11 @@ let webpackConfig = {
   // @see https://webpack.js.org/configuration/externals/#externals
   externals: {
     // Third party dependencies.
-    jquery: 'jQuery',
     underscore: '_',
+    jquery: 'jQuery',
     lodash: 'lodash',
-    react: ['vendor', 'React'],
-    'react-dom': ['vendor', 'ReactDOM'],
+    react: 'React',
+    'react-dom': 'ReactDOM',
 
     // WordPress dependencies.
     '@wordpress/hooks': ['vendor', 'wp', 'hooks'],