Merge pull request #87 from bigbite/hotfix/handle-overwritten-externals

Add checks for which externals are set when running Dependency Extraction

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbite/build-tools",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Provides configuration for the Big Bite Build Tools.",
   "author": "Paul Taylor <[email protected]> (https://github.com/ampersarnie)",
   "engines": {

src/commands/build.js

@@ -127,30 +127,7 @@ exports.handler = async ({
       mode,
     };
 
-    let customWebpackConfig = {
-      extends: true,
-    };
-    let config = webpackConfig(PROJECT_CONFIG, mode);
-
-    try {
-      customWebpackConfig = {
-        ...customWebpackConfig,
-        ...require(PROJECT_CONFIG.paths.project + '/webpack.config.js'),
-      };
-    } catch (e) {}
-
-    if (!customWebpackConfig?.extends) {
-      config = customWebpackConfig;
-    } else if (customWebpackConfig) {
-      config = {
-        ...config,
-        ...customWebpackConfig,
-      };
-    }
-
-    delete config.extends;
-
-    return config;
+    return webpackConfig(PROJECT_CONFIG, mode);
   });
 
   let previousHash = '';

src/commands/build/plugins/custom/dependency-extraction/index.js

@@ -17,13 +17,32 @@ class DependencyExtraction extends WordPressDependencyExtraction {
     super(options);
 
     this.name = options?.name ?? 'project';
+    this.externals = options?.externals ?? {};
 
     global.DependencyExtraction = {
       ...global.DependencyExtraction,
       [this.name]: {},
     };
   }
 
+  externalizeWpDeps(_context, request, callback) {
+    const externalKeys = Object.keys(this?.externals);
+
+    const hardDefaults = [
+      '@wordpress/',
+      '@babel/runtime/regenerator',
+    ];
+
+    if (
+      !externalKeys.includes(request) &&
+      !hardDefaults.some(item => request.startsWith(item))
+    ) {
+      return callback();
+    }
+
+    return super.externalizeWpDeps(_context, request, callback);
+  }
+
   addAssets(compilation) {
     const {
       combineAssets,

src/commands/build/plugins/dependency-extraction.js

@@ -1,7 +1,8 @@
 const DependencyExtraction = require('./custom/dependency-extraction');
 
-module.exports = ({ name }) => {
+module.exports = ({ name }, externals) => {
   return new DependencyExtraction({
     name,
+    externals,
   });
 };

src/commands/build/webpack.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 
@@ -18,62 +19,87 @@ BROWSERSLIST_CONFIG = path.resolve(`${__dirname}/config`);
  * @param {string} projectName The name of the project - this will be the director target.
  * @returns {object} The full webpack configuration for the current project.
  */
-module.exports = (__PROJECT_CONFIG__, mode) => ({
-  mode,
-  entry: entrypoints(__PROJECT_CONFIG__.paths.src),
-
-  resolve: {
-    modules: [__PROJECT_CONFIG__.paths.node_modules, 'node_modules'],
-    alias: webpackAlias(__PROJECT_CONFIG__.paths.src),
-  },
-
-  output: {
-    // @TODO: This should be overridable at some point to allow for custom naming convention.
-    filename: () => (mode === 'production' ? '[name]-[contenthash:8].js' : '[name].js'),
-    path: path.resolve(`${__PROJECT_CONFIG__.paths.dist}/scripts`),
-  },
-
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    jquery: 'jQuery',
-  },
-
-  watchOptions: {
-    ignored: ['node_modules'],
-  },
-
-  performance: {
-    assetFilter: (assetFilename) => /\.(js|css)$/.test(assetFilename),
-    maxEntrypointSize: 20000000, // Large entry point size as we only need asset size. (2mb)
-    maxAssetSize: 500000, // Set max size to 500kb.
-  },
-
-  devtool: mode === 'production' ? 'source-map' : 'inline-cheap-module-source-map',
-
-  plugins: [
+module.exports = (__PROJECT_CONFIG__, mode) => {
+  const customWebpackConfigFile = __PROJECT_CONFIG__.paths.project + '/webpack.config.js';
+  const customConfig = fs.existsSync(customWebpackConfigFile) ? require(customWebpackConfigFile) : null;
+
+  let webpackConfig = {
+    mode,
+    entry: entrypoints(__PROJECT_CONFIG__.paths.src),
+
+    resolve: {
+      modules: [__PROJECT_CONFIG__.paths.node_modules, 'node_modules'],
+      alias: webpackAlias(__PROJECT_CONFIG__.paths.src),
+    },
+
+    output: {
+      // @TODO: This should be overridable at some point to allow for custom naming convention.
+      filename: () => (mode === 'production' ? '[name]-[contenthash:8].js' : '[name].js'),
+      path: path.resolve(`${__PROJECT_CONFIG__.paths.dist}/scripts`),
+    },
+
+    watchOptions: {
+      ignored: ['node_modules'],
+    },
+
+    performance: {
+      assetFilter: (assetFilename) => /\.(js|css)$/.test(assetFilename),
+      maxEntrypointSize: 20000000, // Large entry point size as we only need asset size. (2mb)
+      maxAssetSize: 500000, // Set max size to 500kb.
+    },
+
+    devtool: mode === 'production' ? 'source-map' : 'inline-cheap-module-source-map',
+
+    externals: {
+      moment: 'moment',
+      lodash: ['lodash', 'lodash-es'],
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      jquery: 'jQuery',
+    },
+
+    module: {
+      rules: [
+        ...Rules.javascript(__PROJECT_CONFIG__),
+        ...Rules.images(__PROJECT_CONFIG__),
+        ...Rules.styles(__PROJECT_CONFIG__),
+      ],
+    },
+  };
+
+  if (customConfig) {
+    const shouldExtend = customConfig?.extends ?? true;
+    if (!shouldExtend) {
+      webpackConfig = customConfig;
+    } else {
+      webpackConfig = {
+        ...webpackConfig,
+        ...customConfig,
+      };
+    }
+
+    delete webpackConfig.extends;
+  }
+
+  const plugins = [
     // Global vars for checking dev environment.
     new webpack.DefinePlugin({
       __DEV__: JSON.stringify(mode === 'development'),
       __PROD__: JSON.stringify(mode === 'production'),
       __TEST__: JSON.stringify(process.env.NODE_ENV === 'test'),
     }),
 
-    Plugins.DependencyExtraction(__PROJECT_CONFIG__),
+    Plugins.DependencyExtraction(__PROJECT_CONFIG__, webpackConfig.externals),
     Plugins.ESLint(__PROJECT_CONFIG__),
     Plugins.MiniCssExtract(__PROJECT_CONFIG__),
     Plugins.StyleLint(__PROJECT_CONFIG__),
     Plugins.Clean(__PROJECT_CONFIG__),
     Plugins.Copy(__PROJECT_CONFIG__),
     Plugins.TemplateGenerator(__PROJECT_CONFIG__),
     Plugins.AssetMessage(__PROJECT_CONFIG__),
-  ],
-
-  module: {
-    rules: [
-      ...Rules.javascript(__PROJECT_CONFIG__),
-      ...Rules.images(__PROJECT_CONFIG__),
-      ...Rules.styles(__PROJECT_CONFIG__),
-    ],
-  },
-});
+  ];
+
+  webpackConfig.plugins = plugins;
+
+  return webpackConfig;
+};