diff --git a/packages/app-harness/webpack.config.js b/packages/app-harness/webpack.config.js new file mode 100644 index 0000000000..e7ee1dba2c --- /dev/null +++ b/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()], +}); diff --git a/packages/engine-rn-web/src/adapter.ts b/packages/engine-rn-web/src/adapter.ts index 75f8ddaeae..2b1aa78621 100644 --- a/packages/engine-rn-web/src/adapter.ts +++ b/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 }; diff --git a/packages/engine-rn-web/src/index.ts b/packages/engine-rn-web/src/index.ts index cda3807d3c..ae8c7fe529 100644 --- a/packages/engine-rn-web/src/index.ts +++ b/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; diff --git a/packages/sdk-webpack/package.json b/packages/sdk-webpack/package.json index 853a21626b..c08d80bf33 100644 --- a/packages/sdk-webpack/package.json +++ b/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" diff --git a/packages/sdk-webpack/src/adapter.ts b/packages/sdk-webpack/src/adapter.ts new file mode 100644 index 0000000000..f6cd60241e --- /dev/null +++ b/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; +}; diff --git a/packages/sdk-webpack/src/config/webpack.config.js b/packages/sdk-webpack/src/config/webpack.config.js index 6fa121c6fc..011864e6b3 100644 --- a/packages/sdk-webpack/src/config/webpack.config.js +++ b/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 diff --git a/packages/sdk-webpack/src/index.ts b/packages/sdk-webpack/src/index.ts index 78fa8a311d..c74b69b24e 100644 --- a/packages/sdk-webpack/src/index.ts +++ b/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]; }); diff --git a/packages/sdk-webpack/src/scripts/build.js b/packages/sdk-webpack/src/scripts/build.js index 5165eaae39..6c44e41ce4 100644 --- a/packages/sdk-webpack/src/scripts/build.js +++ b/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( diff --git a/packages/sdk-webpack/src/scripts/start.js b/packages/sdk-webpack/src/scripts/start.js index 84c257c7fc..85ba425793 100644 --- a/packages/sdk-webpack/src/scripts/start.js +++ b/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; diff --git a/packages/template-starter/package.json b/packages/template-starter/package.json index f9ceba5d28..1d2bfcff74 100644 --- a/packages/template-starter/package.json +++ b/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" ] } -} \ No newline at end of file +} diff --git a/packages/template-starter/renative.json b/packages/template-starter/renative.json index fc1f1a0ec7..d7c13de1c0 100644 --- a/packages/template-starter/renative.json +++ b/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 @@ } } } -} \ No newline at end of file +} diff --git a/packages/template-starter/webpack.config.js b/packages/template-starter/webpack.config.js new file mode 100644 index 0000000000..1dcc76ef84 --- /dev/null +++ b/packages/template-starter/webpack.config.js @@ -0,0 +1,3 @@ +const { withRNV } = require('@rnv/engine-rn-web'); + +module.exports = withRNV({}); diff --git a/yarn.lock b/yarn.lock index b229da6786..43cd647739 100644 --- a/yarn.lock +++ b/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==