@caweb/webpack 1.5.8 → 1.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.5.8",
+  "version": "1.5.10",
   "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,11 +107,30 @@ 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;
   }
 });
 
@@ -276,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,
+            }
+          }
+        ],
       }
     ]
   },
@@ -289,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'],
@@ -334,6 +361,15 @@ if( 'serve' === webpackCommand ){
        */
       {
         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:[
@@ -356,6 +392,14 @@ if( 'serve' === webpackCommand ){
         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': '' },
       }
     ]
   }