refactor: move webpack building to webpack file

bigbite · Jul 14, 2023 · 1f819d4 · 1f819d4
1 parent a430cf5
commit 1f819d4
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 84 deletions.
diff --git a/src/commands/build.js b/src/commands/build.js
@@ -1,4 +1,3 @@
-const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const { terminal } = require('terminal-kit');
@@ -103,22 +102,6 @@ exports.handler = async ({
   spinner.start('Building webpack configs.\n');
 
   const configMap = packages.map((packageObject) => {
-    const projectPath = path.resolve(packageObject.path);
-    const customWebpackConfigFile = projectPath + '/webpack.config.js';
-    const customConfig = fs.existsSync(customWebpackConfigFile) ? require(customWebpackConfigFile) : {};
-
-    let customWebpackConfig = {
-      extends: true,
-      externals: {
-        moment: 'moment',
-        lodash: ['lodash', 'lodash-es'],
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        jquery: 'jQuery',
-      },
-      ...customConfig,
-    };
-
     /**
      * Project config holds all information about a particular project,
      * rather than directly pulling out paths from files or attempting
@@ -128,7 +111,7 @@ exports.handler = async ({
       name: packageObject.name,
       version: packageObject.json.version,
       paths: {
-        project: projectPath,
+        project: path.resolve(packageObject.path),
         config: path.resolve(`${__dirname}/configs`),
         src: path.resolve(`${packageObject.path}/src`),
         dist: path.resolve(`${packageObject.path}/dist`),
@@ -142,23 +125,9 @@ exports.handler = async ({
       clean: true,
       copy: true,
       mode,
-      customConfig: customWebpackConfig,
     };
 
-    let config = webpackConfig(PROJECT_CONFIG, mode);
-
-    if (!customWebpackConfig?.extends) {
-      config = customWebpackConfig;
-    } else if (customWebpackConfig) {
-      config = {
-        ...config,
-        ...customWebpackConfig,
-      };
-    }
-
-    delete config.extends;
-
-    return config;
+    return webpackConfig(PROJECT_CONFIG, mode);
   });
 
   let previousHash = '';

diff --git a/src/commands/build/plugins/custom/dependency-extraction/index.js b/src/commands/build/plugins/custom/dependency-extraction/index.js
@@ -17,7 +17,7 @@ class DependencyExtraction extends WordPressDependencyExtraction {
     super(options);
 
     this.name = options?.name ?? 'project';
-    this.customConfig = options?.customConfig ?? {};
+    this.externals = options?.externals ?? {};
 
     global.DependencyExtraction = {
       ...global.DependencyExtraction,
@@ -26,7 +26,7 @@ class DependencyExtraction extends WordPressDependencyExtraction {
   }
 
   externalizeWpDeps(_context, request, callback) {
-    const externalKeys = Object.keys(this.customConfig?.externals);
+    const externalKeys = Object.keys(this?.externals);
 
     const hardDefaults = [
       '@wordpress/',

diff --git a/src/commands/build/plugins/dependency-extraction.js b/src/commands/build/plugins/dependency-extraction.js
@@ -1,8 +1,8 @@
 const DependencyExtraction = require('./custom/dependency-extraction');
 
-module.exports = ({ name, customConfig }) => {
+module.exports = ({ name }, externals) => {
   return new DependencyExtraction({
     name,
-    customConfig,
+    externals,
   });
 };
diff --git a/src/commands/build/webpack.js b/src/commands/build/webpack.js
@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 
@@ -18,64 +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: {
-    moment: 'moment',
-    lodash: ['lodash', 'lodash-es'],
-    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 if (webpackConfig) {
+      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;
+};