diff --git a/.changeset/metal-pigs-jog.md b/.changeset/metal-pigs-jog.md
new file mode 100644
index 000000000..582e342c9
--- /dev/null
+++ b/.changeset/metal-pigs-jog.md
@@ -0,0 +1,5 @@
+---
+"modular-scripts": patch
+---
+
+Refactor modular config into readable parts
diff --git a/packages/modular-scripts/package.json b/packages/modular-scripts/package.json
index 083acd5e4..5fe22270b 100644
--- a/packages/modular-scripts/package.json
+++ b/packages/modular-scripts/package.json
@@ -122,6 +122,7 @@
     "webpack": "5.73.0",
     "webpack-dev-server": "4.9.3",
     "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "^5.8.0",
     "ws": "8.8.1"
   },
   "peerDependencies": {
diff --git a/packages/modular-scripts/react-scripts/config/parts/appConfig.js b/packages/modular-scripts/react-scripts/config/parts/appConfig.js
new file mode 100644
index 000000000..9ca4a2d46
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/appConfig.js
@@ -0,0 +1,71 @@
+'use strict';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const InlineChunkHtmlPlugin = require('../../../react-dev-utils/InlineChunkHtmlPlugin');
+const InterpolateHtmlPlugin = require('../../../react-dev-utils/InterpolateHtmlPlugin');
+
+function createConfig() {
+  return {
+    optimization: {
+      // Automatically split vendor and commons
+      splitChunks: { chunks: 'all' },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: {
+        name: (entrypoint) => `runtime-${entrypoint.name}`,
+      },
+    },
+  };
+}
+
+function createPluginConfig({
+  isEnvProduction,
+  shouldInlineRuntimeChunk,
+  env,
+  paths,
+}) {
+  return {
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined,
+        ),
+      ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // It will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+    ].filter(Boolean),
+  };
+}
+
+module.exports = { createConfig, createPluginConfig };
diff --git a/packages/modular-scripts/react-scripts/config/parts/baseConfig.js b/packages/modular-scripts/react-scripts/config/parts/baseConfig.js
new file mode 100644
index 000000000..0f02645af
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/baseConfig.js
@@ -0,0 +1,367 @@
+'use strict';
+
+const builtinModules = require('builtin-modules');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ModuleScopePlugin = require('../../../react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('../../../react-dev-utils/getCSSModuleLocalIdent');
+const createStyleLoadersConfig = require('./styleLoadersConfig');
+const reactRefreshOverlayEntry = require.resolve(
+  '../../../react-dev-utils/refreshOverlayInterop',
+);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+function createConfig({
+  isEnvProduction,
+  isApp,
+  paths,
+  useTypeScript,
+  isEnvProductionProfile,
+  imageInlineSizeLimit,
+  modules,
+  shouldUseSourceMap,
+  esbuildTargetFactory,
+  dependencyMap,
+}) {
+  const isEnvDevelopment = !isEnvProduction;
+  const isEsmView = !isApp;
+
+  return {
+    // Workaround for this bug: https://stackoverflow.com/questions/53905253/cant-set-up-the-hmr-stuck-with-waiting-for-update-signal-from-wds-in-cons
+    target: 'web',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    // We bundle a virtual file to trampoline the ESM view as an entry point if we're starting it (ESM views have no ReactDOM.render)
+    output: {
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      publicPath: paths.publicUrlOrPath,
+    },
+    resolve: {
+      // This allows you to set a fallback for where webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || [],
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !isApp || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+      },
+      // Some libraries import Node modules but don't use them in the browser.
+      // Tell webpack to provide empty mocks for them so importing them works.
+      // See https://github.com/webpack/webpack/issues/11649
+      fallback: builtinModules.reduce((acc, next) => {
+        acc[next] = false;
+        return acc;
+      }, {}),
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [
+          paths.appPackageJson,
+          reactRefreshOverlayEntry,
+        ]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              type: 'asset',
+              mimetype: 'image/avif',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+              generator: {
+                filename: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: /\.(bmp|gif|jpe?g|png|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+              generator: {
+                filename: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    prettier: false,
+                    svgo: false,
+                    svgoConfig: {
+                      plugins: [{ removeViewBox: false }],
+                    },
+                    titleProp: true,
+                    ref: true,
+                  },
+                },
+                {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: 'static/media/[name].[hash].[ext]',
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              },
+            },
+            // Process application JS with esbuild.
+            {
+              test: /\.(js|mjs|jsx)$/,
+              include: paths.modularSrc,
+              loader: require.resolve('esbuild-loader'),
+              options: {
+                implementation: require('esbuild'),
+                loader: 'tsx',
+                target: esbuildTargetFactory,
+              },
+            },
+            {
+              test: /\.ts$/,
+              include: paths.modularSrc,
+              loader: require.resolve('esbuild-loader'),
+              options: {
+                implementation: require('esbuild'),
+                loader: 'ts',
+                target: esbuildTargetFactory,
+              },
+            },
+            {
+              test: /\.tsx$/,
+              include: paths.modularSrc,
+              loader: require.resolve('esbuild-loader'),
+              options: {
+                implementation: require('esbuild'),
+                loader: 'tsx',
+                target: esbuildTargetFactory,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: createStyleLoadersConfig({
+                cssOptions: {
+                  importLoaders: 1,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                },
+
+                includeEsmLoader: isEsmView,
+                dependencyMap,
+                isEnvProduction,
+                shouldUseSourceMap,
+              }),
+
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: createStyleLoadersConfig({
+                cssOptions: {
+                  importLoaders: 1,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                dependencyMap,
+                isEnvProduction,
+                shouldUseSourceMap,
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: createStyleLoadersConfig({
+                cssOptions: {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                },
+                preProcessor: require.resolve('sass-loader'),
+                dependencyMap,
+                isEnvProduction,
+                shouldUseSourceMap,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: createStyleLoadersConfig({
+                cssOptions: {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                preProcessor: require.resolve('sass-loader'),
+                dependencyMap,
+                isEnvProduction,
+                shouldUseSourceMap,
+              }),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/(^|\.(js|mjs|jsx|ts|tsx|html|json))$/],
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+        new CssMinimizerPlugin(),
+      ],
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+}
+
+function createPluginConfig() {}
+
+module.exports = { createConfig, createPluginConfig };
diff --git a/packages/modular-scripts/react-scripts/config/parts/developmentConfig.js b/packages/modular-scripts/react-scripts/config/parts/developmentConfig.js
new file mode 100644
index 000000000..d2870a530
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/developmentConfig.js
@@ -0,0 +1,43 @@
+'use strict';
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const WatchMissingNodeModulesPlugin = require('../../../react-dev-utils/WatchMissingNodeModulesPlugin');
+
+function createConfig({ path }) {
+  return {
+    mode: 'development',
+    bail: false,
+    devtool: 'cheap-module-source-map',
+    output: {
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: true,
+      // In development, it does not produce real files.
+      filename: 'static/js/[name].js',
+      // Please remember that Webpack 5, unlike Webpack 4, controls "splitChunks" via fileName, not chunkFilename - https://stackoverflow.com/questions/66077740/webpack-5-output-chunkfilename-not-working
+      chunkFilename: 'static/js/[name].chunk.js',
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: (info) =>
+        path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+    },
+    optimization: {
+      minimize: false,
+    },
+  };
+}
+
+function createPluginConfig({ paths }) {
+  return {
+    plugins: [
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+    ].filter(Boolean),
+  };
+}
+
+module.exports = { createConfig, createPluginConfig };
diff --git a/packages/modular-scripts/react-scripts/config/parts/esmViewConfig.js b/packages/modular-scripts/react-scripts/config/parts/esmViewConfig.js
new file mode 100644
index 000000000..40710649d
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/esmViewConfig.js
@@ -0,0 +1,90 @@
+'use strict';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { parsePackageName } = require('../utils/esmUtils');
+const path = require('path');
+
+function createConfig({ dependencyMap, paths, isEnvProduction }) {
+  return {
+    entry: !isEnvProduction ? getVirtualTrampoline(paths) : paths.appIndexJs,
+    externals: createExternalRewriter(dependencyMap),
+    externalsType: 'module',
+    experiments: { outputModule: true },
+    output: {
+      module: true,
+      library: { type: 'module' },
+    },
+  };
+}
+
+function createPluginConfig({ isEnvProduction }) {
+  return {
+    plugins: [
+      // We need to provide a synthetic index.html in case we're starting a ESM view
+      !isEnvProduction &&
+        new HtmlWebpackPlugin(
+          Object.assign(
+            {},
+            {
+              inject: true,
+              templateContent: `
+                <html>
+                  <body>
+                    <div id="root"></div>
+                  </body>
+                </html>
+                `,
+              scriptLoading: 'module',
+            },
+          ),
+        ),
+    ].filter(Boolean),
+  };
+}
+
+function createExternalRewriter(dependencyMap) {
+  return function rewriteExternals({ request }, callback) {
+    const parsedModule = parsePackageName(request);
+
+    // If the module is absolute and it is in the import map, we want to externalise it
+    if (
+      parsedModule &&
+      parsedModule.dependencyName &&
+      dependencyMap[parsedModule.dependencyName] &&
+      // If this is an absolute export of css we need to deal with it in the loader
+      !request.endsWith('.css')
+    ) {
+      const { dependencyName, submodule } = parsedModule;
+
+      const toRewrite = `${dependencyMap[dependencyName]}${
+        submodule ? `/${submodule}` : ''
+      }`;
+
+      return callback(null, toRewrite);
+    }
+    // Otherwise we just want to bundle it
+    return callback();
+  };
+}
+
+// Virtual entrypoint if we're starting a ESM view - see https://github.com/webpack/webpack/issues/6437
+function getVirtualTrampoline(paths) {
+  // Build the relative path between the root and the entrypoint.
+  const relativeEntrypointPath = path
+    .relative(paths.appPath, paths.appIndexJs)
+    .split(path.sep)
+    .join(path.posix.sep); // Separator could be win32 on Windows system, since it comes from a filesystem path. Force it to be posix since it's an URL
+
+  const entryPointPath = `'./${relativeEntrypointPath}'`;
+  const string = `
+  import ReactDOM from 'react-dom'
+  import React from 'react';
+  import Component from ${entryPointPath};
+  const DOMRoot = document.getElementById('root');
+  ReactDOM.render(React.createElement(Component, null), DOMRoot);
+	`;
+
+  const base64 = Buffer.from(string).toString('base64');
+  return `./src/_trampoline.js!=!data:text/javascript;base64,${base64}`;
+}
+
+module.exports = { createConfig, createPluginConfig };
diff --git a/packages/modular-scripts/react-scripts/config/parts/pluginConfig.js b/packages/modular-scripts/react-scripts/config/parts/pluginConfig.js
new file mode 100644
index 000000000..b97e69b42
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/pluginConfig.js
@@ -0,0 +1,152 @@
+'use strict';
+
+const webpack = require('webpack');
+const resolve = require('resolve');
+const isCI = require('is-ci');
+const { merge } = require('webpack-merge');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ModuleNotFoundPlugin = require('../../../react-dev-utils/ModuleNotFoundPlugin');
+const getClientEnvironment = require('../env');
+const paths = require('../paths');
+const {
+  createPluginConfig: createEsmViewPluginConfig,
+} = require('./esmViewConfig');
+const { createPluginConfig: createAppPluginConfig } = require('./appConfig');
+const {
+  createPluginConfig: createDevelopmentPluginConfig,
+} = require('./developmentConfig');
+const {
+  createPluginConfig: createProductionPluginConfig,
+} = require('./productionConfig');
+
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+// We will provide `paths.publicUrlOrPath` to our app
+// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+// Get environment variables to inject into our app.
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+module.exports = function createPluginConfig({
+  isApp,
+  isEnvProduction,
+  shouldUseSourceMap,
+  useTypeScript,
+}) {
+  const isEnvDevelopment = !isEnvProduction;
+
+  const appPlugins = createAppPluginConfig({
+    isEnvProduction,
+    shouldInlineRuntimeChunk,
+    env,
+    paths,
+  });
+
+  const esmViewPlugins = createEsmViewPluginConfig({ isEnvProduction });
+
+  const developmentPlugins = createDevelopmentPluginConfig({ paths });
+
+  const productionPlugins = createProductionPluginConfig();
+
+  const basePlugins = {
+    plugins: [
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            (fileName) => !fileName.endsWith('.map'),
+          );
+
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          };
+        },
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
+      // TypeScript type checking turned off for CI envs
+      // https://github.com/jpmorganchase/modular/issues/605
+      useTypeScript &&
+        !isCI &&
+        new ForkTsCheckerWebpackPlugin({
+          async: isEnvDevelopment,
+          typescript: {
+            async: isEnvDevelopment,
+            typescriptPath: resolve.sync('typescript', {
+              basedir: paths.appNodeModules,
+            }),
+            configOverwrite: {
+              compilerOptions: {
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                skipLibCheck: true,
+                inlineSourceMap: false,
+                declarationMap: false,
+                noEmit: true,
+              },
+            },
+            context: paths.appPath,
+            diagnosticOptions: {
+              syntactic: true,
+              semantic: true,
+            },
+            mode: 'write-references',
+          },
+          issue: {
+            // This one is specifically to match during CI tests,
+            // as micromatch doesn't match
+            // '../cra-template-typescript/template/src/App.tsx'
+            // otherwise.
+            include: [
+              { file: '../**/src/**/*.{ts,tsx}' },
+              { file: '**/src/**/*.{ts,tsx}' },
+            ],
+            exclude: [
+              { file: '**/src/**/__tests__/**' },
+              { file: '**/src/**/?(*.){spec|test}.*' },
+              { file: '**/src/setupProxy.*' },
+              { file: '**/src/setupTests.*' },
+            ],
+          },
+        }),
+    ].filter(Boolean),
+  };
+
+  return merge([
+    isApp ? appPlugins : esmViewPlugins,
+    isEnvProduction ? productionPlugins : developmentPlugins,
+    basePlugins,
+  ]);
+};
diff --git a/packages/modular-scripts/react-scripts/config/parts/productionConfig.js b/packages/modular-scripts/react-scripts/config/parts/productionConfig.js
new file mode 100644
index 000000000..c924cf0b0
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/productionConfig.js
@@ -0,0 +1,45 @@
+'use strict';
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+function createConfig({ shouldUseSourceMap, paths }) {
+  return {
+    mode: 'production',
+    // Stop compilation early in production
+    bail: true,
+    devtool: shouldUseSourceMap ? 'source-map' : false,
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      pathinfo: false,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      filename: 'static/js/[name].[contenthash:8].js',
+      // There are also additional JS chunk files if you use code splitting.
+      // Please remember that Webpack 5, unlike Webpack 4, controls "splitChunks" via fileName, not chunkFilename - https://stackoverflow.com/questions/66077740/webpack-5-output-chunkfilename-not-working
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: (info) =>
+        path
+          .relative(paths.appSrc, info.absoluteResourcePath)
+          .replace(/\\/g, '/'),
+    },
+    optimization: {
+      minimize: true,
+    },
+  };
+}
+
+function createPluginConfig() {
+  return {
+    plugins: [
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      }),
+    ].filter(Boolean),
+  };
+}
+
+module.exports = { createConfig, createPluginConfig };
diff --git a/packages/modular-scripts/react-scripts/config/parts/styleLoadersConfig.js b/packages/modular-scripts/react-scripts/config/parts/styleLoadersConfig.js
new file mode 100644
index 000000000..ebd208fd1
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/parts/styleLoadersConfig.js
@@ -0,0 +1,88 @@
+'use strict';
+
+const postcssNormalize = require('postcss-normalize');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const paths = require('../paths');
+
+// common function to get style loaders
+function createConfig({
+  cssOptions,
+  preProcessor,
+  includeEsmLoader,
+  dependencyMap,
+  isEnvProduction,
+  shouldUseSourceMap,
+}) {
+  const isEnvDevelopment = !isEnvProduction;
+  const loaders = [
+    // This loader translates external css dependencies if we're using a CDN
+    // Since it's a pitching loader, it's important that it stays at the top
+    // excluding all the others in the chain if it's triggered
+    includeEsmLoader &&
+      function externalStyleLoader(info) {
+        return {
+          loader: require.resolve('../cdnStyleLoader'),
+          options: { info, dependencyMap },
+        };
+      },
+    isEnvDevelopment && require.resolve('style-loader'),
+    isEnvProduction && {
+      loader: MiniCssExtractPlugin.loader,
+      // css is located in `static/css`, use '../../' to locate index.html folder
+      // in production `paths.publicUrlOrPath` can be a relative path
+      options: paths.publicUrlOrPath.startsWith('.')
+        ? { publicPath: '../../' }
+        : {},
+    },
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          plugins: [
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+            }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
+          ],
+        },
+        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        implementation: require('postcss'),
+      },
+    },
+  ].filter(Boolean);
+  if (preProcessor) {
+    loaders.push(
+      {
+        loader: require.resolve('resolve-url-loader'),
+        options: {
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+          root: paths.appSrc,
+        },
+      },
+      {
+        loader: preProcessor,
+        options: {
+          sourceMap: true,
+        },
+      },
+    );
+  }
+
+  return loaders;
+}
+
+module.exports = createConfig;
diff --git a/packages/modular-scripts/react-scripts/config/utils/esmUtils.js b/packages/modular-scripts/react-scripts/config/utils/esmUtils.js
new file mode 100644
index 000000000..6cbd88fe4
--- /dev/null
+++ b/packages/modular-scripts/react-scripts/config/utils/esmUtils.js
@@ -0,0 +1,53 @@
+'use strict';
+
+const packageRegex =
+  /^(@[a-z0-9-~][a-z0-9-._~]*)?\/?([a-z0-9-~][a-z0-9-._~]*)\/?(.*)/;
+
+function parsePackageName(name) {
+  const parsedName = packageRegex.exec(name);
+  if (!parsedName) {
+    return;
+  }
+  const [_, scope, module, submodule] = parsedName;
+  const dependencyName = (scope ? `${scope}/` : '') + module;
+  return { dependencyName, scope, module, submodule };
+}
+
+function createExternalDependenciesMap({
+  externalDependencies,
+  externalResolutions,
+  selectiveCDNResolutions,
+}) {
+  const externalCdnTemplate =
+    process.env.EXTERNAL_CDN_TEMPLATE ||
+    'https://cdn.skypack.dev/[name]@[version]';
+
+  return Object.entries(externalDependencies).reduce((acc, [name, version]) => {
+    if (!externalResolutions[name]) {
+      throw new Error(
+        `Dependency ${name} found in package.json but not in lockfile. Have you installed your dependencies?`,
+      );
+    }
+
+    return {
+      ...acc,
+      [name]: externalCdnTemplate
+        .replace('[name]', name)
+        .replace('[version]', version || externalResolutions[name])
+        .replace('[resolution]', externalResolutions[name])
+        .replace(
+          '[selectiveCDNResolutions]',
+          selectiveCDNResolutions
+            ? Object.entries(selectiveCDNResolutions)
+                .map(([key, value]) => `${key}@${value}`)
+                .join(',')
+            : '',
+        ),
+    };
+  }, {});
+}
+
+module.exports = {
+  createExternalDependenciesMap,
+  parsePackageName,
+};
diff --git a/packages/modular-scripts/react-scripts/config/webpack.config.js b/packages/modular-scripts/react-scripts/config/webpack.config.js
index e3826c282..33882c6db 100644
--- a/packages/modular-scripts/react-scripts/config/webpack.config.js
+++ b/packages/modular-scripts/react-scripts/config/webpack.config.js
@@ -3,29 +3,24 @@
 const chalk = require('chalk');
 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const builtinModules = require('builtin-modules');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('../../react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+
+const { merge } = require('webpack-merge');
+
 const logger = require('../../react-dev-utils/logger');
-const InterpolateHtmlPlugin = require('../../react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('../../react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('../../react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('../../react-dev-utils/getCSSModuleLocalIdent');
+
 const paths = require('./paths');
 const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('../../react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const postcssNormalize = require('postcss-normalize');
-const isCI = require('is-ci');
+const createPluginConfig = require('./parts/pluginConfig');
+const { createConfig: createEsmViewConfig } = require('./parts/esmViewConfig');
+const { createConfig: createAppConfig } = require('./parts/appConfig');
+const {
+  createConfig: createDevelopmentConfig,
+} = require('./parts/developmentConfig');
+const {
+  createConfig: createProductionConfig,
+} = require('./parts/productionConfig');
+const { createConfig: createBaseConfig } = require('./parts/baseConfig');
+const { createExternalDependenciesMap } = require('./utils/esmUtils');
 
 const isApp = process.env.MODULAR_IS_APP === 'true';
 const isEsmView = !isApp;
@@ -54,14 +49,6 @@ const selectiveCDNResolutions = process.env
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-const reactRefreshOverlayEntry = require.resolve(
-  '../../react-dev-utils/refreshOverlayInterop',
-);
-
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
 );
@@ -69,12 +56,6 @@ const imageInlineSizeLimit = parseInt(
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
@@ -83,20 +64,20 @@ module.exports = function (webpackEnv) {
   const isEsmViewDevelopment = isEsmView & isEnvDevelopment;
 
   // This is needed if we're serving a ESM view in development node, since it won't be defined in the view dependencies.
-  if (externalDependencies.react && isEsmViewDevelopment) {
+  if (isEsmViewDevelopment && externalDependencies.react) {
     externalDependencies['react-dom'] = externalDependencies.react;
   }
-  if (externalResolutions.react && isEsmViewDevelopment) {
+  if (isEsmViewDevelopment && externalResolutions.react) {
     externalResolutions['react-dom'] = externalResolutions.react;
   }
 
   // Create a map of external dependencies if we're building a ESM view
   const dependencyMap = isEsmView
-    ? createExternalDependenciesMap(
+    ? createExternalDependenciesMap({
         externalDependencies,
         externalResolutions,
         selectiveCDNResolutions,
-      )
+      })
     : {};
 
   // Variable used for enabling profiling in Production
@@ -104,649 +85,54 @@ module.exports = function (webpackEnv) {
   const isEnvProductionProfile =
     isEnvProduction && process.argv.includes('--profile');
 
-  // We will provide `paths.publicUrlOrPath` to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-
-  // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor, includeEsmLoader) => {
-    const loaders = [
-      // This loader translates external css dependencies if we're using a CDN
-      // Since it's a pitching loader, it's important that it stays at the top
-      // excluding all the others in the chain if it's triggered
-      includeEsmLoader &&
-        function externalStyleLoader(info) {
-          return {
-            loader: require.resolve('./cdnStyleLoader'),
-            options: { info, dependencyMap },
-          };
-        },
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        // css is located in `static/css`, use '../../' to locate index.html folder
-        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.')
-          ? { publicPath: '../../' }
-          : {},
-      },
-      {
-        loader: require.resolve('css-loader'),
-        options: cssOptions,
-      },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          postcssOptions: {
-            plugins: [
-              require('postcss-flexbugs-fixes'),
-              require('postcss-preset-env')({
-                autoprefixer: {
-                  flexbox: 'no-2009',
-                },
-                stage: 3,
-              }),
-              // Adds PostCSS Normalize as the reset css with default options,
-              // so that it honors browserslist config in package.json
-              // which in turn let's users customize the target behavior as per their needs.
-              postcssNormalize(),
-            ],
-          },
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-          implementation: require('postcss'),
-        },
-      },
-    ].filter(Boolean);
-    if (preProcessor) {
-      loaders.push(
-        {
-          loader: require.resolve('resolve-url-loader'),
-          options: {
-            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-            root: paths.appSrc,
-          },
-        },
-        {
-          loader: preProcessor,
-          options: {
-            sourceMap: true,
-          },
-        },
-      );
-    }
-
-    return loaders;
-  };
-
-  const webpackConfig = {
-    externals: isApp
-      ? undefined
-      : function ({ request }, callback) {
-          const parsedModule = parsePackageName(request);
-
-          // If the module is absolute and it is in the import map, we want to externalise it
-          if (
-            parsedModule &&
-            parsedModule.dependencyName &&
-            dependencyMap[parsedModule.dependencyName] &&
-            // If this is an absolute export of css we need to deal with it in the loader
-            !request.endsWith('.css')
-          ) {
-            const { dependencyName, submodule } = parsedModule;
-
-            const toRewrite = `${dependencyMap[dependencyName]}${
-              submodule ? `/${submodule}` : ''
-            }`;
-
-            return callback(null, toRewrite);
-          }
-          // Otherwise we just want to bundle it
-          return callback();
-        },
-
-    externalsType: isApp ? undefined : 'module',
-    experiments: {
-      outputModule: isApp ? undefined : true,
-    },
-    // Workaround for this bug: https://stackoverflow.com/questions/53905253/cant-set-up-the-hmr-stuck-with-waiting-for-update-signal-from-wds-in-cons
-    target: 'web',
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    // We bundle a virtual file to trampoline the ESM view as an entry point if we're starting it (ESM views have no ReactDOM.render)
-    entry: isEsmViewDevelopment ? getVirtualTrampoline() : paths.appIndexJs,
-    output: {
-      module: isApp ? undefined : true,
-      library: isApp
-        ? undefined
-        : {
-            type: 'module',
-          },
-      // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/[name].js',
-      // There are also additional JS chunk files if you use code splitting.
-      // Please remember that Webpack 5, unlike Webpack 4, controls "splitChunks" via fileName, not chunkFilename - https://stackoverflow.com/questions/66077740/webpack-5-output-chunkfilename-not-working
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      // webpack uses `publicPath` to determine where the app is being served from.
-      // It requires a trailing slash, or the file assets will get an incorrect path.
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      publicPath: paths.publicUrlOrPath,
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? (info) =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          ((info) =>
-            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-    },
-    optimization: {
-      minimize: isEnvProduction,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            // Added for profiling in devtools
-            keep_classnames: isEnvProductionProfile,
-            keep_fnames: isEnvProductionProfile,
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-        }),
-        new CssMinimizerPlugin(),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: isApp
-        ? {
-            chunks: 'all',
-          }
-        : undefined,
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: isApp
-        ? {
-            name: (entrypoint) => `runtime-${entrypoint.name}`,
-          }
-        : undefined,
-    },
-    resolve: {
-      // This allows you to set a fallback for where webpack should look for modules.
-      // We placed these paths second because we want `node_modules` to "win"
-      // if there are any conflicts. This matches Node resolution mechanism.
-      // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || [],
-      ),
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: paths.moduleFileExtensions
-        .map((ext) => `.${ext}`)
-        .filter((ext) => useTypeScript || !isApp || !ext.includes('ts')),
-      alias: {
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-        // Allows for better profiling with ReactDevTools
-        ...(isEnvProductionProfile && {
-          'react-dom$': 'react-dom/profiling',
-          'scheduler/tracing': 'scheduler/tracing-profiling',
-        }),
-        ...(modules.webpackAliases || {}),
-      },
-      // Some libraries import Node modules but don't use them in the browser.
-      // Tell webpack to provide empty mocks for them so importing them works.
-      // See https://github.com/webpack/webpack/issues/11649
-      fallback: builtinModules.reduce((acc, next) => {
-        acc[next] = false;
-        return acc;
-      }, {}),
-      plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
-        // Prevents users from importing files from outside of src/ (or node_modules/).
-        // This often causes confusion because we only process files within src/ with babel.
-        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-        // please link the files into your node_modules/ and let module-resolution kick in.
-        // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [
-          paths.appPackageJson,
-          reactRefreshOverlayEntry,
-        ]),
-      ],
-    },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
-    module: {
-      strictExportPresence: true,
-      rules: [
-        {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
-            // TODO: Merge this config once `image/avif` is in the mime-db
-            // https://github.com/jshttp/mime-db
-            {
-              test: [/\.avif$/],
-              type: 'asset',
-              mimetype: 'image/avif',
-              parser: {
-                dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
-              generator: {
-                filename: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-            {
-              test: /\.(bmp|gif|jpe?g|png|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
-              type: 'asset',
-              parser: {
-                dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
-              generator: {
-                filename: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            {
-              test: /\.svg$/,
-              use: [
-                {
-                  loader: require.resolve('@svgr/webpack'),
-                  options: {
-                    prettier: false,
-                    svgo: false,
-                    svgoConfig: {
-                      plugins: [{ removeViewBox: false }],
-                    },
-                    titleProp: true,
-                    ref: true,
-                  },
-                },
-                {
-                  loader: require.resolve('file-loader'),
-                  options: {
-                    name: 'static/media/[name].[hash].[ext]',
-                  },
-                },
-              ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
-            },
-            // Process application JS with esbuild.
-            {
-              test: /\.(js|mjs|jsx)$/,
-              include: paths.modularSrc,
-              loader: require.resolve('esbuild-loader'),
-              options: {
-                implementation: require('esbuild'),
-                loader: 'tsx',
-                target: esbuildTargetFactory,
-              },
-            },
-            {
-              test: /\.ts$/,
-              include: paths.modularSrc,
-              loader: require.resolve('esbuild-loader'),
-              options: {
-                implementation: require('esbuild'),
-                loader: 'ts',
-                target: esbuildTargetFactory,
-              },
-            },
-            {
-              test: /\.tsx$/,
-              include: paths.modularSrc,
-              loader: require.resolve('esbuild-loader'),
-              options: {
-                implementation: require('esbuild'),
-                loader: 'tsx',
-                target: esbuildTargetFactory,
-              },
-            },
-            // "postcss" loader applies autoprefixer to our CSS.
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-            // By default we support CSS Modules with the extension .module.css
-            {
-              test: cssRegex,
-              exclude: cssModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 1,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
-                },
-                undefined,
-                isEsmView,
-              ),
+  // Create configurations
+
+  // base, common configuration
+  const baseConfig = createBaseConfig({
+    isEnvProduction,
+    isApp,
+    paths,
+    useTypeScript,
+    isEnvProductionProfile,
+    imageInlineSizeLimit,
+    modules,
+    shouldUseSourceMap,
+    esbuildTargetFactory,
+    dependencyMap,
+  });
 
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-            // using the extension .module.css
-            {
-              test: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
-                modules: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-              }),
-            },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // By default we support SASS Modules with the
-            // extensions .module.scss or .module.sass
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
-                },
-                require.resolve('sass-loader'),
-              ),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules, but using SASS
-            // using the extension .module.scss or .module.sass
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
-                  modules: {
-                    getLocalIdent: getCSSModuleLocalIdent,
-                  },
-                },
-                require.resolve('sass-loader'),
-              ),
-            },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
-            {
-              loader: require.resolve('file-loader'),
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/(^|\.(js|mjs|jsx|ts|tsx|html|json))$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ],
-    },
-    plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      isApp
-        ? new HtmlWebpackPlugin(
-            Object.assign(
-              {},
-              {
-                inject: true,
-                template: paths.appHtml,
-              },
-              isEnvProduction
-                ? {
-                    minify: {
-                      removeComments: true,
-                      collapseWhitespace: true,
-                      removeRedundantAttributes: true,
-                      useShortDoctype: true,
-                      removeEmptyAttributes: true,
-                      removeStyleLinkTypeAttributes: true,
-                      keepClosingSlash: true,
-                      minifyJS: true,
-                      minifyCSS: true,
-                      minifyURLs: true,
-                    },
-                  }
-                : undefined,
-            ),
-          )
-        : isEsmViewDevelopment
-        ? // We need to provide a synthetic index.html in case we're starting a ESM view
-          new HtmlWebpackPlugin(
-            Object.assign(
-              {},
-              {
-                inject: true,
-                templateContent: `
-                <html>
-                  <body>
-                    <div id="root"></div>
-                  </body>
-                </html>
-                `,
-                scriptLoading: 'module',
-              },
-            ),
-          )
-        : false,
-      // Inlines the webpack runtime script. This script is too small to warrant
-      // a network request.
-      // https://github.com/facebook/create-react-app/issues/5358
-      isApp &&
-        isEnvProduction &&
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
-      // Makes some environment variables available in index.html.
-      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // It will be an empty string unless you specify "homepage"
-      // in `package.json`, in which case it will be the pathname of that URL.
-      isApp && new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
-      // Makes some environment variables available to the JS code, for example:
-      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-      // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
-      // Generate an asset manifest file with the following content:
-      // - "files" key: Mapping of all asset filenames to their corresponding
-      //   output file so that tools can pick it up without having to parse
-      //   `index.html`
-      // - "entrypoints" key: Array of files which are included in `index.html`,
-      //   can be used to reconstruct the HTML if necessary
-      new WebpackManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: paths.publicUrlOrPath,
-        generate: (seed, files, entrypoints) => {
-          const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            (fileName) => !fileName.endsWith('.map'),
-          );
+  // Specific configuration based on modular type (app, esm-view)
+  const modularTypeConfiguration = isApp
+    ? createAppConfig()
+    : createEsmViewConfig({
+        dependencyMap,
+        paths,
+        isEnvProduction,
+      });
+
+  // Specific configuration based on build type (production, development)
+  const buildTypeConfiguration = isEnvProduction
+    ? createProductionConfig({
+        shouldUseSourceMap,
+        paths,
+      })
+    : createDevelopmentConfig({ path });
+
+  // Plugin configuration
+  const pluginConfig = createPluginConfig({
+    isApp,
+    isEnvProduction,
+    shouldUseSourceMap,
+    useTypeScript,
+  });
 
-          return {
-            files: manifestFiles,
-            entrypoints: entrypointFiles,
-          };
-        },
-      }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin({
-        resourceRegExp: /^\.\/locale$/,
-        contextRegExp: /moment$/,
-      }),
-      // TypeScript type checking turned off for CI envs
-      // https://github.com/jpmorganchase/modular/issues/605
-      useTypeScript &&
-        !isCI &&
-        new ForkTsCheckerWebpackPlugin({
-          async: isEnvDevelopment,
-          typescript: {
-            async: isEnvDevelopment,
-            typescriptPath: resolve.sync('typescript', {
-              basedir: paths.appNodeModules,
-            }),
-            configOverwrite: {
-              compilerOptions: {
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
-                skipLibCheck: true,
-                inlineSourceMap: false,
-                declarationMap: false,
-                noEmit: true,
-              },
-            },
-            context: paths.appPath,
-            diagnosticOptions: {
-              syntactic: true,
-              semantic: true,
-            },
-            mode: 'write-references',
-          },
-          issue: {
-            // This one is specifically to match during CI tests,
-            // as micromatch doesn't match
-            // '../cra-template-typescript/template/src/App.tsx'
-            // otherwise.
-            include: [
-              { file: '../**/src/**/*.{ts,tsx}' },
-              { file: '**/src/**/*.{ts,tsx}' },
-            ],
-            exclude: [
-              { file: '**/src/**/__tests__/**' },
-              { file: '**/src/**/?(*.){spec|test}.*' },
-              { file: '**/src/setupProxy.*' },
-              { file: '**/src/setupTests.*' },
-            ],
-          },
-        }),
-    ].filter(Boolean),
-    // Turn off performance processing because we utilize
-    // our own hints via the FileSizeReporter
-    performance: false,
-  };
+  // Merge all configurations into the final one
+  const webpackConfig = merge([
+    baseConfig,
+    modularTypeConfiguration,
+    buildTypeConfiguration,
+    pluginConfig,
+  ]);
 
   // These dependencies are so widely used for us (JPM) that it makes sense to install
   // their webpack plugin when used.
@@ -793,70 +179,3 @@ module.exports = function (webpackEnv) {
 
   return webpackConfig;
 };
-
-function createExternalDependenciesMap(
-  externalDependencies,
-  externalResolutions,
-  selectiveCDNResolutions,
-) {
-  const externalCdnTemplate =
-    process.env.EXTERNAL_CDN_TEMPLATE ||
-    'https://cdn.skypack.dev/[name]@[version]';
-
-  return Object.entries(externalDependencies).reduce((acc, [name, version]) => {
-    if (!externalResolutions[name]) {
-      throw new Error(
-        `Dependency ${name} found in package.json but not in lockfile. Have you installed your dependencies?`,
-      );
-    }
-
-    return {
-      ...acc,
-      [name]: externalCdnTemplate
-        .replace('[name]', name)
-        .replace('[version]', version || externalResolutions[name])
-        .replace('[resolution]', externalResolutions[name])
-        .replace(
-          '[selectiveCDNResolutions]',
-          selectiveCDNResolutions
-            ? Object.entries(selectiveCDNResolutions)
-                .map(([key, value]) => `${key}@${value}`)
-                .join(',')
-            : '',
-        ),
-    };
-  }, {});
-}
-
-const packageRegex =
-  /^(@[a-z0-9-~][a-z0-9-._~]*)?\/?([a-z0-9-~][a-z0-9-._~]*)\/?(.*)/;
-function parsePackageName(name) {
-  const parsedName = packageRegex.exec(name);
-  if (!parsedName) {
-    return;
-  }
-  const [_, scope, module, submodule] = parsedName;
-  const dependencyName = (scope ? `${scope}/` : '') + module;
-  return { dependencyName, scope, module, submodule };
-}
-
-// Virtual entrypoint if we're starting a ESM view - see https://github.com/webpack/webpack/issues/6437
-function getVirtualTrampoline() {
-  // Build the relative path between the root and the entrypoint.
-  const relativeEntrypointPath = path
-    .relative(paths.appPath, paths.appIndexJs)
-    .split(path.sep)
-    .join(path.posix.sep); // Separator could be win32 on Windows system, since it comes from a filesystem path. Force it to be posix since it's an URL
-
-  const entryPointPath = `'./${relativeEntrypointPath}'`;
-  const string = `
-  import ReactDOM from 'react-dom'
-  import React from 'react';
-  import Component from ${entryPointPath};
-  const DOMRoot = document.getElementById('root');
-  ReactDOM.render(React.createElement(Component, null), DOMRoot);
-	`;
-
-  const base64 = Buffer.from(string).toString('base64');
-  return `./src/_trampoline.js!=!data:text/javascript;base64,${base64}`;
-}
diff --git a/yarn.lock b/yarn.lock
index 26d67a9e5..ffd4bc599 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4359,6 +4359,15 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
 clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -11164,6 +11173,13 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -12429,6 +12445,14 @@ webpack-manifest-plugin@5.0.0:
     tapable "^2.0.0"
     webpack-sources "^2.2.0"
 
+webpack-merge@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
 webpack-sources@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
@@ -12560,6 +12584,11 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+wildcard@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
+  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
+
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"