Support extends for the Webpack configuration object in webpack.project

ui.apps/src/main/webpack.core/internals/webpack.config.base.js

@@ -29,7 +29,6 @@ const WEBPACK_CONFIG_BASE = {
       exclude: /node_modules/,
       use: [{
         loader: 'babel-loader',
-        // Webpack v4: `query` replaces `options`
         query: require('./babel.config.js'),
       }, {
         loader: 'eslint-loader',
@@ -40,7 +39,7 @@ const WEBPACK_CONFIG_BASE = {
         },
       }],
     }, {
-      // The "?" allows you use both file formats: .css and .scss
+      // The "?" allows you to use both file formats: .css and .scss
       test: /\.s?css$/,
       exclude: /node_modules/,
       use: [

ui.apps/src/main/webpack.core/internals/webpack.config.js

@@ -1,7 +1,14 @@
 const path = require('path');
 
 const CONFIG = require('./../../webpack.project');
+const WEBPACK_CONFIG_BASE = path.resolve(__dirname, './webpack.config.base.js');
 
-CONFIG.webpack.extends = path.join(__dirname, './webpack.config.base.js');
+if (typeof CONFIG.webpack.extends === 'string') {
+  // Convert string into array so we can apply our base config
+  CONFIG.webpack.extends = [CONFIG.webpack.extends];
+}
+
+CONFIG.webpack.extends = CONFIG.webpack.extends || [];
+CONFIG.webpack.extends.push(WEBPACK_CONFIG_BASE);
 
 module.exports = CONFIG.webpack;

ui.apps/src/main/webpack.project/index.js

@@ -15,6 +15,16 @@ const AEM = {
  * WEBPACK
  */
 const WEBPACK = {
+  /**
+   * Optional: You can base this config on another Webpack config.
+   * More details: https://github.com/webpack-contrib/config-loader/blob/master/docs/EXTENDS.md
+   * NOTE: We haven't thoroughly tested this feature yet.
+   * It's unclear how other Webpack configs will behave when combined with our base configuration.
+   */
+  // extends: [
+  //   path.join(__dirname, '../webpack.config.shared.js'),
+  // ],
+
   /*
    * Here we can add specify as many entries as we want. One entry results in one output file.
    * The property name ("components") defines how the target file is named, e.g. 'main' results in 'main.bundle.js'.