Merge pull request #1395 from flexn-io/fix/webpack_merge

fix/webpack_merge

packages/app-harness/webpack.config.js

@@ -0,0 +1,13 @@
+const webpack = require('webpack'); //to access built-in plugins
+
+const { withRNV } = require('@rnv/engine-rn-web');
+
+module.exports = withRNV({
+    resolve: {
+        alias: {
+            'my-module': 'some_path',
+        },
+        modules: ['test_modules'],
+    },
+    plugins: [new webpack.ProgressPlugin()],
+});

packages/engine-rn-web/src/adapter.ts

@@ -1,6 +1,7 @@
 import { BabelConfig } from '@rnv/core';
+import { withRNVWebpack } from '@rnv/sdk-webpack';
 
-export const withRNVBabel = (cnf: BabelConfig): BabelConfig => {
+const withRNVBabel = (cnf: BabelConfig): BabelConfig => {
     const plugins = cnf?.plugins || [];
 
     return {
@@ -18,3 +19,7 @@ export const withRNVBabel = (cnf: BabelConfig): BabelConfig => {
         ],
     };
 };
+
+const withRNV = withRNVWebpack;
+
+export { withRNV, withRNVBabel };

packages/engine-rn-web/src/index.ts

@@ -1,5 +1,5 @@
 import { generateEngineExtensions, generateEngineTasks, RnvEngine } from '@rnv/core';
-import { withRNVBabel } from './adapter';
+import { withRNVBabel, withRNV } from './adapter';
 //@ts-ignore
 import CNF from '../renative.engine.json';
 import taskRnvRun from './tasks/task.rnv.run';
@@ -77,6 +77,6 @@ const Engine: RnvEngine = {
     },
 };
 
-export { withRNVBabel };
+export { withRNVBabel, withRNV };
 
 export default Engine;

packages/sdk-webpack/package.json

@@ -73,7 +73,8 @@
         "webpack-cli": "4.9.2",
         "webpack-dev-server": "^4.7.4",
         "webpack-manifest-plugin": "^4.0.2",
-        "workbox-webpack-plugin": "6.5.4"
+        "workbox-webpack-plugin": "6.5.4",
+        "webpack-merge": "5.10.0"
     },
     "peerDependencies": {
         "@rnv/core": "^1.0.0-rc.11"

packages/sdk-webpack/src/adapter.ts

@@ -0,0 +1,27 @@
+import path from 'path';
+import { Configuration } from 'webpack';
+
+import { mergeWithCustomize, unique, merge } from 'webpack-merge';
+
+export const withRNVWebpack = (cnf: Configuration) => {
+    //TODO: implement further overrides
+    const rnvConfig: Configuration = {};
+    const config = merge(rnvConfig, cnf);
+    return config;
+};
+
+export const getMergedConfig = (rootConfig: Configuration, appPath: string) => {
+    // RNV-ADDITION
+
+    const projectConfig = require(path.join(appPath, 'webpack.config'));
+    const rootPlugins = rootConfig.plugins?.map((plugin) => plugin?.constructor.name) as string[];
+
+    const mergedConfig: Configuration = mergeWithCustomize({
+        customizeArray: unique('plugins', rootPlugins, (plugin) => plugin.constructor && plugin.constructor.name),
+    })(rootConfig, projectConfig);
+
+    // Merge => static config, adapter config , project config
+    // RNV-ADDITION
+
+    return mergedConfig;
+};

packages/sdk-webpack/src/config/webpack.config.js

@@ -13,6 +13,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+
 // const ESLintPlugin = require('eslint-webpack-plugin');
 
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
@@ -396,9 +397,12 @@ module.exports = function (webpackEnv) {
                                     //         runtime: hasJsxRuntime ? 'automatic' : 'classic',
                                     //     },
                                     // ],
-                                    ["@babel/preset-react", {
-                                        "runtime": "automatic"
-                                    }]
+                                    [
+                                        '@babel/preset-react',
+                                        {
+                                            runtime: 'automatic',
+                                        },
+                                    ],
                                 ],
 
                                 plugins: [
@@ -425,9 +429,12 @@ module.exports = function (webpackEnv) {
                                 compact: false,
                                 // presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
                                 presets: [
-                                    ["@babel/preset-react", {
-                                        "runtime": "automatic"
-                                    }]
+                                    [
+                                        '@babel/preset-react',
+                                        {
+                                            runtime: 'automatic',
+                                        },
+                                    ],
                                 ],
                                 cacheDirectory: true,
                                 // See #6846 for context on why cacheCompression is disabled

packages/sdk-webpack/src/index.ts

@@ -27,6 +27,8 @@ import {
 } from '@rnv/core';
 import { getDevServerHost, openBrowser, waitForHost } from '@rnv/sdk-utils';
 import { EnvVars } from './env';
+import { withRNVWebpack } from './adapter';
+export { withRNVWebpack };
 
 export const REMOTE_DEBUG_PORT = 8079;
 
@@ -159,6 +161,7 @@ export const _runWebDevServer = async (c: RnvContext, enableRemoteDebugger?: boo
         ...EnvVars.WEBPACK_TARGET(),
         ...EnvVars.RNV_EXTERNAL_PATHS(),
     };
+
     Object.keys(env).forEach((v) => {
         process.env[v] = env[v];
     });

packages/sdk-webpack/src/scripts/build.js

@@ -1,8 +1,10 @@
 /* eslint-disable global-require */
 
 // Do this as the first thing so that any code reading it knows the right env.
-
-import { logError, logInfo, logWarning} from '@rnv/core';
+// RNV-ADDITION
+import { getMergedConfig } from '../adapter';
+// RNV-ADDITION
+import { logError, logInfo, logWarning } from '@rnv/core';
 
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
@@ -31,7 +33,9 @@ const printBuildError = require('react-dev-utils/printBuildError');
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
+// const configFactory = require('../config/webpack.config');
+// eslint-disable-next-line no-undef
+const config = getMergedConfig(require('../config/webpack.config')('production'), paths.appPath);
 
 const { measureFileSizesBeforeBuild } = FileSizeReporter;
 const { printFileSizesAfterBuild } = FileSizeReporter;
@@ -52,7 +56,6 @@ const argv = process.argv.slice(2);
 const writeStatsJson = argv.indexOf('--stats') !== -1;
 
 // Generate configuration
-const config = configFactory('production');
 
 export default async () =>
     checkBrowsers(paths.appPath, isInteractive)
@@ -79,7 +82,7 @@ export default async () =>
                         )} to learn more about each warning.`
                     );
                     logInfo(`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`);
-                } 
+                }
 
                 logInfo('File sizes after gzip:\n');
                 printFileSizesAfterBuild(

packages/sdk-webpack/src/scripts/start.js

@@ -1,3 +1,6 @@
+// RNV-ADDITION
+import { getMergedConfig } from '../adapter';
+// RNV-ADDITION
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
 process.env.NODE_ENV = 'development';
@@ -22,7 +25,10 @@ const { createCompiler, prepareProxy, prepareUrls } = require('react-dev-utils/W
 const semver = require('semver');
 const { Logger } = require('rnv');
 const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
+// const configFactory = require('../config/webpack.config');
+// const configFactory = require('react-scripts/config/webpack.config.js');
+const config = getMergedConfig(require('../config/webpack.config')('development'), paths.appPath);
+
 const createDevServerConfig = require('../config/webpackDevServer.config');
 const getClientEnvironment = require('../config/env');
 
@@ -52,8 +58,6 @@ export default async () =>
             Logger.logInfo(`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`);
             Logger.logInfo();
         }
-
-        const config = configFactory('development');
         const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
         const appName = require(paths.appPackageJson).name;
 

packages/template-starter/package.json

@@ -61,7 +61,8 @@
         "src",
         "static",
         "tsconfig.json",
-        "typings"
+        "typings",
+        "webpack.config.js"
     ],
     "repository": {
         "type": "git",
@@ -137,4 +138,4 @@
             "last 1 safari version"
         ]
     }
-}
+}

packages/template-starter/renative.json

@@ -110,9 +110,7 @@
             "minSdkVersion": 21,
             "extendPlatform": "android",
             "engine": "engine-rn-tvos",
-            "includedPermissions": [
-                "INTERNET"
-            ]
+            "includedPermissions": ["INTERNET"]
         },
         "web": {
             "engine": "engine-rn-next"
@@ -184,4 +182,4 @@
             }
         }
     }
-}
+}

packages/template-starter/webpack.config.js

@@ -0,0 +1,3 @@
+const { withRNV } = require('@rnv/engine-rn-web');
+
+module.exports = withRNV({});

yarn.lock

@@ -21356,7 +21356,7 @@ webpack-manifest-plugin@^4.0.2:
     tapable "^2.0.0"
     webpack-sources "^2.2.0"
 
-webpack-merge@^5.7.3:
+webpack-merge@5.10.0, webpack-merge@^5.7.3:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
   integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==