From b6ebc1c369a91e8a5cef2eea181b5b8b58a5da0b Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Mon, 9 Jan 2023 05:15:37 -0500
Subject: [PATCH] feat(webpack): remove support for legacy browsers (#14190)

---
 .../packages/react/generators/init.json       |   2 +-
 .../packages/web/executors/webpack.json       |   4 -
 .../packages/webpack/executors/webpack.json   |   4 -
 e2e/nx-run/src/affected-graph.test.ts         |   1 -
 e2e/web/src/file-server.test.ts               |   7 +-
 e2e/web/src/web.test.ts                       |  17 -
 .../react/plugins/component-testing/index.ts  |   1 -
 .../component-testing/webpack-fallback.ts     |   2 +-
 packages/react/plugins/storybook/index.ts     |  23 +-
 .../application/application.spec.ts           |  15 -
 .../files/common/.browserslistrc__tmpl__      |  16 -
 .../files/common/src/polyfills.ts__tmpl__     |   7 -
 .../generators/application/lib/add-project.ts |   4 -
 packages/react/src/generators/init/init.ts    |   2 -
 .../react/src/generators/init/schema.json     |   2 +-
 packages/web/babel.ts                         |   1 -
 .../web/src/executors/webpack/schema.json     |   4 -
 .../application/application.spec.ts           |   1 -
 .../src/generators/application/application.ts |   4 -
 .../files/app/src/polyfills.ts__tmpl__        |   7 -
 packages/webpack/index.ts                     |   4 +
 packages/webpack/migrations.json              |   6 +
 packages/webpack/package.json                 |   2 -
 .../dev-server/lib/get-dev-server-config.ts   |   2 -
 .../webpack/lib/get-webpack-config.ts         | 338 +------------
 .../webpack/lib/normalize-options.ts          |   6 +-
 .../webpack/src/executors/webpack/schema.d.ts |   1 -
 .../webpack/src/executors/webpack/schema.json |   4 -
 .../src/executors/webpack/webpack.impl.ts     | 102 ++--
 .../remove-es2015-polyfills-option.spec.ts    |  67 +++
 .../remove-es2015-polyfills-option.ts         |  22 +
 .../generate-package-json-webpack-plugin.ts   |   0
 .../webpack/src/plugins/stats-json-plugin.ts  |  10 +
 packages/webpack/src/utils/config.ts          | 438 +---------------
 .../webpack/src/utils/create-copy-plugin.ts   |  24 +
 .../src/utils/get-client-environment.ts       |  30 ++
 .../src/utils/get-css-module-local-ident.ts   |  31 ++
 packages/webpack/src/utils/models.ts          |   5 +-
 .../webpack/build-browser-features.spec.ts    | 161 ------
 .../utils/webpack/build-browser-features.ts   |  78 ---
 .../src/utils/webpack/normalize-entry.ts      |  20 +-
 .../src/utils/webpack/package-chunk-sort.ts   |   6 +-
 .../src/utils/webpack/partials/browser.ts     |  91 ----
 .../src/utils/webpack/partials/common.ts      | 249 ---------
 .../src/utils/webpack/partials/styles.ts      | 219 --------
 .../index-file/index-html-generator.ts        |  11 +-
 .../plugins/index-html-webpack-plugin.ts      |   7 +-
 .../utils/webpack/plugins/raw-css-loader.ts   |   5 -
 .../src/utils/webpack/safari-nomodule.js      |  23 -
 .../src/utils/webpack/write-index-html.ts     |  20 +-
 packages/webpack/src/utils/with-nx.ts         | 352 +++++++++++++
 packages/webpack/src/utils/with-web.ts        | 472 ++++++++++++++++++
 52 files changed, 1102 insertions(+), 1828 deletions(-)
 delete mode 100644 packages/react/src/generators/application/files/common/.browserslistrc__tmpl__
 delete mode 100644 packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__
 delete mode 100644 packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__
 create mode 100644 packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.spec.ts
 create mode 100644 packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.ts
 rename packages/webpack/src/{utils => plugins}/generate-package-json-webpack-plugin.ts (100%)
 create mode 100644 packages/webpack/src/plugins/stats-json-plugin.ts
 create mode 100644 packages/webpack/src/utils/create-copy-plugin.ts
 create mode 100644 packages/webpack/src/utils/get-client-environment.ts
 create mode 100644 packages/webpack/src/utils/get-css-module-local-ident.ts
 delete mode 100644 packages/webpack/src/utils/webpack/build-browser-features.spec.ts
 delete mode 100644 packages/webpack/src/utils/webpack/build-browser-features.ts
 delete mode 100644 packages/webpack/src/utils/webpack/partials/browser.ts
 delete mode 100644 packages/webpack/src/utils/webpack/partials/common.ts
 delete mode 100644 packages/webpack/src/utils/webpack/partials/styles.ts
 delete mode 100644 packages/webpack/src/utils/webpack/plugins/raw-css-loader.ts
 delete mode 100644 packages/webpack/src/utils/webpack/safari-nomodule.js
 create mode 100644 packages/webpack/src/utils/with-nx.ts
 create mode 100644 packages/webpack/src/utils/with-web.ts

diff --git a/docs/generated/packages/react/generators/init.json b/docs/generated/packages/react/generators/init.json
index 1dc4ad03259eb1..5122a0829ac2be 100644
--- a/docs/generated/packages/react/generators/init.json
+++ b/docs/generated/packages/react/generators/init.json
@@ -37,7 +37,7 @@
         "default": false
       },
       "skipHelperLibs": {
-        "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).",
+        "description": "Do not install  tslib.",
         "type": "boolean",
         "default": false,
         "hidden": true
diff --git a/docs/generated/packages/web/executors/webpack.json b/docs/generated/packages/web/executors/webpack.json
index d132d178304f87..b326f36f4bc419 100644
--- a/docs/generated/packages/web/executors/webpack.json
+++ b/docs/generated/packages/web/executors/webpack.json
@@ -300,10 +300,6 @@
         "description": "Extract CSS into a `.css` file.",
         "default": true
       },
-      "es2015Polyfills": {
-        "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-        "type": "string"
-      },
       "subresourceIntegrity": {
         "type": "boolean",
         "description": "Enables the use of subresource integrity validation.",
diff --git a/docs/generated/packages/webpack/executors/webpack.json b/docs/generated/packages/webpack/executors/webpack.json
index b5205f93070602..978e1a70b5f4b2 100644
--- a/docs/generated/packages/webpack/executors/webpack.json
+++ b/docs/generated/packages/webpack/executors/webpack.json
@@ -307,10 +307,6 @@
         "description": "Extract CSS into a `.css` file.",
         "default": true
       },
-      "es2015Polyfills": {
-        "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-        "type": "string"
-      },
       "subresourceIntegrity": {
         "type": "boolean",
         "description": "Enables the use of subresource integrity validation.",
diff --git a/e2e/nx-run/src/affected-graph.test.ts b/e2e/nx-run/src/affected-graph.test.ts
index b34b5be8cf3891..04afebbace74ee 100644
--- a/e2e/nx-run/src/affected-graph.test.ts
+++ b/e2e/nx-run/src/affected-graph.test.ts
@@ -597,7 +597,6 @@ describe('Nx Affected and Graph Tests', () => {
       expect(() => checkFilesExist('project-graph.html')).not.toThrow();
       expect(() => checkFilesExist('static/styles.css')).not.toThrow();
       expect(() => checkFilesExist('static/runtime.js')).not.toThrow();
-      expect(() => checkFilesExist('static/polyfills.js')).not.toThrow();
       expect(() => checkFilesExist('static/main.js')).not.toThrow();
       expect(() => checkFilesExist('static/environment.js')).not.toThrow();
 
diff --git a/e2e/web/src/file-server.test.ts b/e2e/web/src/file-server.test.ts
index 902f58463dd18b..369569cbbed699 100644
--- a/e2e/web/src/file-server.test.ts
+++ b/e2e/web/src/file-server.test.ts
@@ -26,10 +26,7 @@ describe('file-server', () => {
     const p = await runCommandUntil(
       `serve ${appName} --port=${port}`,
       (output) => {
-        return (
-          output.indexOf('webpack compiled') > -1 &&
-          output.indexOf(`localhost:${port}`) > -1
-        );
+        return output.indexOf(`localhost:${port}`) > -1;
       }
     );
 
@@ -39,5 +36,5 @@ describe('file-server', () => {
     } catch {
       // ignore
     }
-  }, 1000000);
+  }, 300_000);
 });
diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts
index 2f7e345e6dfdb6..c6857607704f61 100644
--- a/e2e/web/src/web.test.ts
+++ b/e2e/web/src/web.test.ts
@@ -112,23 +112,6 @@ describe('Web Components Applications', () => {
     checkFilesExist(`dist/libs/${libName}/_should_keep.txt`);
   }, 120000);
 
-  it('should do another build if differential loading is needed', async () => {
-    const appName = uniq('app');
-
-    runCLI(
-      `generate @nrwl/web:app ${appName} --bundler=webpack --no-interactive`
-    );
-
-    updateFile(`apps/${appName}/browserslist`, `IE 9-11`);
-
-    runCLI(`build ${appName} --outputHashing=none`);
-
-    checkFilesExist(
-      `dist/apps/${appName}/main.js`,
-      `dist/apps/${appName}/main.es5.js`
-    );
-  }, 120000);
-
   it('should emit decorator metadata when it is enabled in tsconfig', async () => {
     const appName = uniq('app');
     runCLI(
diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts
index 7c1a226effdf74..a463049bea9418 100644
--- a/packages/react/plugins/component-testing/index.ts
+++ b/packages/react/plugins/component-testing/index.ts
@@ -222,7 +222,6 @@ function buildTargetWebpack(
       const defaultWebpack = getWebpackConfig(
         context,
         options,
-        true,
         isScriptOptimizeOn,
         {
           root: ctProjectConfig.root,
diff --git a/packages/react/plugins/component-testing/webpack-fallback.ts b/packages/react/plugins/component-testing/webpack-fallback.ts
index 397314e16f08bf..a35a6933c86c5c 100644
--- a/packages/react/plugins/component-testing/webpack-fallback.ts
+++ b/packages/react/plugins/component-testing/webpack-fallback.ts
@@ -1,6 +1,6 @@
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
-import { getCSSModuleLocalIdent } from '@nrwl/webpack/src/executors/webpack/lib/get-webpack-config';
+import { getCSSModuleLocalIdent } from '@nrwl/webpack';
 
 export function buildBaseWebpackConfig({
   tsConfigPath = 'tsconfig.cy.json',
diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts
index e62db3befd13bc..bd0fc947461aba 100644
--- a/packages/react/plugins/storybook/index.ts
+++ b/packages/react/plugins/storybook/index.ts
@@ -1,23 +1,18 @@
 import {
-  ExecutorContext,
   joinPathFragments,
   logger,
-  ProjectGraph,
   readJsonFile,
-  readNxJson,
-  TargetConfiguration,
   workspaceRoot,
 } from '@nrwl/devkit';
 import { getBaseWebpackPartial } from '@nrwl/webpack/src/utils/config';
 import { NormalizedWebpackExecutorOptions } from '@nrwl/webpack/src/executors/webpack/schema';
-import { getStylesPartial } from '@nrwl/webpack/src/executors/webpack/lib/get-webpack-config';
+// import { getStylesPartial } from '@nrwl/webpack/src/executors/webpack/lib/get-webpack-config';
 import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
 import { join } from 'path';
 import { gte } from 'semver';
 import { Configuration, DefinePlugin, WebpackPluginInstance } from 'webpack';
 import * as mergeWebpack from 'webpack-merge';
 import { mergePlugins } from './merge-plugins';
-import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph';
 
 const reactWebpackConfig = require('../webpack');
 
@@ -119,24 +114,12 @@ export const webpack = async (
     target: 'web',
   };
 
-  const esm = true;
   const isScriptOptimizeOn = storybookWebpackConfig.mode !== 'development';
   const extractCss = storybookWebpackConfig.mode === 'production';
 
   // ESM build for modern browsers.
-  const baseWebpackConfig = mergeWebpack.merge([
-    getBaseWebpackPartial(builderOptions, {
-      esm,
-      isScriptOptimizeOn,
-      skipTypeCheck: true,
-    }),
-    getStylesPartial(
-      options.workspaceRoot,
-      options.configDir,
-      builderOptions,
-      extractCss
-    ),
-  ]);
+  let baseWebpackConfig: Configuration = {};
+  baseWebpackConfig = getBaseWebpackPartial(builderOptions);
 
   // run it through the React customizations
   const finalConfig = reactWebpackConfig(baseWebpackConfig);
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
index 12c42801e930b2..2c2cd18375d006 100644
--- a/packages/react/src/generators/application/application.spec.ts
+++ b/packages/react/src/generators/application/application.spec.ts
@@ -73,7 +73,6 @@ describe('app', () => {
       await applicationGenerator(appTree, schema);
 
       expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy();
-      expect(appTree.exists('apps/my-app/.browserslistrc')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy();
@@ -312,7 +311,6 @@ describe('app', () => {
       main: 'apps/my-app/src/main.tsx',
       baseHref: '/',
       outputPath: 'dist/apps/my-app',
-      polyfills: 'apps/my-app/src/polyfills.ts',
       scripts: [],
       styles: ['apps/my-app/src/styles.css'],
       tsConfig: 'apps/my-app/tsconfig.app.json',
@@ -810,19 +808,6 @@ describe('app', () => {
     ).toBeUndefined();
   });
 
-  it('should add required polyfills for core-js and regenerator', async () => {
-    await applicationGenerator(appTree, {
-      ...schema,
-    });
-
-    const polyfillsSource = appTree
-      .read('apps/my-app/src/polyfills.ts')
-      .toString();
-
-    expect(polyfillsSource).toContain('regenerator');
-    expect(polyfillsSource).toContain('core-js');
-  });
-
   describe('--skipWorkspaceJson', () => {
     it('should update workspace with defaults when --skipWorkspaceJson=false', async () => {
       await applicationGenerator(appTree, {
diff --git a/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__ b/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__
deleted file mode 100644
index f1d12df4faa25a..00000000000000
--- a/packages/react/src/generators/application/files/common/.browserslistrc__tmpl__
+++ /dev/null
@@ -1,16 +0,0 @@
-# This file is used by:
-# 1. autoprefixer to adjust CSS to support the below specified browsers
-# 2. babel preset-env to adjust included polyfills
-#
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-#
-# If you need to support different browsers in production, you may tweak the list below.
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major version
-last 2 iOS major versions
-Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__ b/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__
deleted file mode 100644
index 2adf3d05b6fcf4..00000000000000
--- a/packages/react/src/generators/application/files/common/src/polyfills.ts__tmpl__
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
- *
- * See: https://github.com/zloirock/core-js#babel
- */
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
diff --git a/packages/react/src/generators/application/lib/add-project.ts b/packages/react/src/generators/application/lib/add-project.ts
index 804900447a4d12..384e0a84e34ca9 100644
--- a/packages/react/src/generators/application/lib/add-project.ts
+++ b/packages/react/src/generators/application/lib/add-project.ts
@@ -57,10 +57,6 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
         options.appProjectRoot,
         maybeJs(options, `src/main.tsx`)
       ),
-      polyfills: joinPathFragments(
-        options.appProjectRoot,
-        maybeJs(options, 'src/polyfills.ts')
-      ),
       tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
       assets: [
         joinPathFragments(options.appProjectRoot, 'src/favicon.ico'),
diff --git a/packages/react/src/generators/init/init.ts b/packages/react/src/generators/init/init.ts
index 171384eca47c3e..a50b41672a5818 100755
--- a/packages/react/src/generators/init/init.ts
+++ b/packages/react/src/generators/init/init.ts
@@ -52,8 +52,6 @@ function updateDependencies(host: Tree, schema: InitSchema) {
   };
 
   if (!schema.skipHelperLibs) {
-    dependencies['core-js'] = '^3.6.5';
-    dependencies['regenerator-runtime'] = '0.13.7';
     dependencies['tslib'] = tsLibVersion;
   }
 
diff --git a/packages/react/src/generators/init/schema.json b/packages/react/src/generators/init/schema.json
index 1f907f6d259378..1c6800c0244a90 100644
--- a/packages/react/src/generators/init/schema.json
+++ b/packages/react/src/generators/init/schema.json
@@ -34,7 +34,7 @@
       "default": false
     },
     "skipHelperLibs": {
-      "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).",
+      "description": "Do not install  tslib.",
       "type": "boolean",
       "default": false,
       "hidden": true
diff --git a/packages/web/babel.ts b/packages/web/babel.ts
index 602b1b10c11a9a..6ff992d615d0d2 100644
--- a/packages/web/babel.ts
+++ b/packages/web/babel.ts
@@ -43,7 +43,6 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
           ? { targets: { node: 'current' }, loose: true }
           : {
               // Allow importing core-js in entrypoint and use browserlist to select polyfills.
-              // This is needed for differential loading as well.
               useBuiltIns: options.useBuiltIns ?? 'entry',
               corejs: 3,
               // Do not transform modules to CJS
diff --git a/packages/web/src/executors/webpack/schema.json b/packages/web/src/executors/webpack/schema.json
index 200624c469b832..51b7e81f9d6d2c 100644
--- a/packages/web/src/executors/webpack/schema.json
+++ b/packages/web/src/executors/webpack/schema.json
@@ -176,10 +176,6 @@
       "description": "Extract CSS into a `.css` file.",
       "default": true
     },
-    "es2015Polyfills": {
-      "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-      "type": "string"
-    },
     "subresourceIntegrity": {
       "type": "boolean",
       "description": "Enables the use of subresource integrity validation.",
diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts
index 23179043c18e0d..55c939ebebaab6 100644
--- a/packages/web/src/generators/application/application.spec.ts
+++ b/packages/web/src/generators/application/application.spec.ts
@@ -348,7 +348,6 @@ describe('app', () => {
       baseHref: '/',
       main: 'apps/my-app/src/main.ts',
       outputPath: 'dist/apps/my-app',
-      polyfills: 'apps/my-app/src/polyfills.ts',
       scripts: [],
       styles: ['apps/my-app/src/styles.css'],
       tsConfig: 'apps/my-app/tsconfig.app.json',
diff --git a/packages/web/src/generators/application/application.ts b/packages/web/src/generators/application/application.ts
index ba7e1899edec41..634f5bc130b542 100644
--- a/packages/web/src/generators/application/application.ts
+++ b/packages/web/src/generators/application/application.ts
@@ -91,10 +91,6 @@ async function setupBundler(tree: Tree, options: NormalizedSchema) {
       'src/index.html'
     );
     buildOptions.baseHref = '/';
-    buildOptions.polyfills = joinPathFragments(
-      options.appProjectRoot,
-      'src/polyfills.ts'
-    );
     buildOptions.styles = [
       joinPathFragments(options.appProjectRoot, `src/styles.${options.style}`),
     ];
diff --git a/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__
deleted file mode 100644
index 2adf3d05b6fcf4..00000000000000
--- a/packages/web/src/generators/application/files/app/src/polyfills.ts__tmpl__
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
- *
- * See: https://github.com/zloirock/core-js#babel
- */
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
diff --git a/packages/webpack/index.ts b/packages/webpack/index.ts
index 57e56c9b3afbc1..1cd12a35512ac2 100644
--- a/packages/webpack/index.ts
+++ b/packages/webpack/index.ts
@@ -1,3 +1,4 @@
+export * from './src/utils/create-copy-plugin';
 export * from './src/utils/config';
 export * from './src/generators/init/init';
 export * from './src/generators/webpack-project/webpack-project';
@@ -11,3 +12,6 @@ export type {
   FileReplacement,
 } from './src/executors/webpack/schema';
 export * from './src/executors/webpack/webpack.impl';
+export * from './src/utils/get-css-module-local-ident';
+export * from './src/utils/with-nx';
+export * from './src/utils/with-web';
diff --git a/packages/webpack/migrations.json b/packages/webpack/migrations.json
index 75899c88e20553..f8d499c14cae9e 100644
--- a/packages/webpack/migrations.json
+++ b/packages/webpack/migrations.json
@@ -7,5 +7,11 @@
       "factory": "./src/migrations/update-15-0-0/add-babel-inputs"
     }
   },
+  "remove-es2015-polyfills-option": {
+    "cli": "nx",
+    "version": "15.4.5-beta.0",
+    "description": "Removes es2015Polyfills option since legacy browsers are no longer supported.",
+    "factory": "./src/migrations/update-15-4-5/remove-es2015-polyfills-option"
+  },
   "packageJsonUpdates": {}
 }
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index cc257164bc849d..b327f4ad9b52b9 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -34,8 +34,6 @@
     "@nrwl/workspace": "file:../workspace",
     "autoprefixer": "^10.4.9",
     "babel-loader": "^8.2.2",
-    "browserslist": "^4.21.4",
-    "caniuse-lite": "^1.0.30001394",
     "chalk": "4.1.0",
     "chokidar": "^3.5.1",
     "copy-webpack-plugin": "^10.2.4",
diff --git a/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts b/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts
index eae0b8b7a76056..cfbe56ca770aff 100644
--- a/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts
+++ b/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts
@@ -23,7 +23,6 @@ export function getDevServerConfig(
   const webpackConfig = getWebpackConfig(
     context,
     buildOptions,
-    true,
     typeof buildOptions.optimization === 'boolean'
       ? buildOptions.optimization
       : buildOptions.optimization?.scripts
@@ -53,7 +52,6 @@ export function getDevServerConfig(
       deployUrl,
       sri: subresourceIntegrity,
       moduleEntrypoints: [],
-      noModuleEntrypoints: ['polyfills-es5'],
     })
   );
 
diff --git a/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts b/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts
index 10cdf2f3a50af5..9a2aef5eccb704 100644
--- a/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts
+++ b/packages/webpack/src/executors/webpack/lib/get-webpack-config.ts
@@ -1,29 +1,11 @@
-import * as path from 'path';
-import { posix, resolve } from 'path';
-import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript';
-import { ScriptTarget } from 'typescript';
-import { getHashDigest, interpolateName } from 'loader-utils';
 import type { Configuration } from 'webpack';
+import { ExecutorContext } from '@nrwl/devkit';
 
 import { NormalizedWebpackExecutorOptions } from '../schema';
-
-// TODO(jack): These should be inlined in a single function so it is easier to understand
-import { getBaseWebpackPartial } from '../../../utils/config';
-import { getBrowserConfig } from '../../../utils/webpack/partials/browser';
-import { getCommonConfig } from '../../../utils/webpack/partials/common';
-import { getStylesConfig } from '../../../utils/webpack/partials/styles';
-import { ExecutorContext } from '@nrwl/devkit';
-import MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import { withNx } from '../../../utils/with-nx';
+import { withWeb } from '../../../utils/with-web';
 import webpackMerge = require('webpack-merge');
-import postcssImports = require('postcss-import');
-
-// PostCSS options depend on the webpack loader, but we need to set the `config` path as a string due to this check:
-// https://github.com/webpack-contrib/postcss-loader/blob/0d342b1/src/utils.js#L36
-interface PostcssOptions {
-  (loader: any): any;
-
-  config?: string;
-}
+import { composePlugins } from '@nrwl/webpack';
 
 interface GetWebpackConfigOverrides {
   root: string;
@@ -34,312 +16,12 @@ interface GetWebpackConfigOverrides {
 export function getWebpackConfig(
   context: ExecutorContext,
   options: NormalizedWebpackExecutorOptions,
-  esm?: boolean,
-  isScriptOptimizeOn?: boolean,
-  overrides?: GetWebpackConfigOverrides
-): Configuration {
-  const tsConfig = readTsConfig(options.tsConfig);
-  const workspaceRoot = context.root;
-
-  let sourceRoot: string;
-  let projectRoot: string;
-  if (overrides) {
-    projectRoot = overrides.root;
-    sourceRoot = overrides.sourceRoot;
-  } else {
-    const project =
-      context.projectsConfigurations.projects[context.projectName];
-    projectRoot = project.root;
-    sourceRoot = project.sourceRoot;
-  }
-
-  if (isScriptOptimizeOn) {
-    // Angular CLI uses an environment variable (NG_BUILD_DIFFERENTIAL_FULL)
-    // to determine whether to use the scriptTargetOverride
-    // or the tsConfig target
-    // We want to force the target if overridden
-    tsConfig.options.target = ScriptTarget.ES5;
-  }
-  const wco: any = {
-    root: workspaceRoot,
-    projectRoot: resolve(workspaceRoot, projectRoot),
-    sourceRoot: resolve(workspaceRoot, sourceRoot),
-    buildOptions: convertBuildOptions(options),
-    esm,
-    console,
-    tsConfig,
-    tsConfigPath: options.tsConfig,
-  };
-  // TODO(jack): Replace merge behavior with an inlined config so it is easier to understand.
-  return webpackMerge.merge([
-    _getBaseWebpackPartial(
-      context,
-      options,
-      esm,
-      isScriptOptimizeOn,
-      tsConfig.options.emitDecoratorMetadata,
-      overrides
-    ),
-    options.target === 'web'
-      ? getPolyfillsPartial(
-          options.polyfills,
-          options.es2015Polyfills,
-          esm,
-          isScriptOptimizeOn
-        )
-      : {},
-    options.target === 'web'
-      ? getStylesPartial(
-          wco.root,
-          wco.projectRoot,
-          wco.buildOptions,
-          options.extractCss,
-          options.postcssConfig
-        )
-      : {},
-    getCommonPartial(wco),
-    options.target === 'web' ? getBrowserConfig(wco) : {},
-  ]);
-}
-
-function _getBaseWebpackPartial(
-  context: ExecutorContext,
-  options: NormalizedWebpackExecutorOptions,
-  esm: boolean,
-  isScriptOptimizeOn: boolean,
-  emitDecoratorMetadata: boolean,
+  /** @deprecated Check options object instead */
+  _isScriptOptimizeOn?: boolean,
+  // TODO(jack): The overrides object is needed for component testing (can we set it on context object?)
   overrides?: GetWebpackConfigOverrides
-) {
-  let partial = getBaseWebpackPartial(
-    options,
-    {
-      esm,
-      isScriptOptimizeOn,
-      emitDecoratorMetadata,
-      configuration: overrides?.configuration ?? context.configurationName,
-    },
-    context
-  );
-  delete partial.resolve.mainFields;
-  return partial;
-}
-
-function getCommonPartial(wco: any): Configuration {
-  const commonConfig: Configuration = <Configuration>getCommonConfig(wco);
-  delete commonConfig.entry;
-  delete commonConfig.resolve.modules;
-  delete commonConfig.resolve.extensions;
-  delete commonConfig.output.path;
-  delete commonConfig.module;
-  return commonConfig;
-}
-
-export function getStylesPartial(
-  workspaceRoot: string,
-  projectRoot: string,
-  options: any,
-  extractCss: boolean,
-  postcssConfig?: string
-): Configuration {
-  const includePaths: string[] = [];
-
-  if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
-    options.stylePreprocessorOptions.includePaths.forEach(
-      (includePath: string) =>
-        includePaths.push(path.resolve(workspaceRoot, includePath))
-    );
-  }
-
-  const partial = getStylesConfig(workspaceRoot, options, includePaths);
-  const rules = partial.module.rules.map((rule) => {
-    if (!Array.isArray(rule.use)) {
-      return rule;
-    }
-    rule.use = rule.use.map((loaderConfig) => {
-      if (
-        typeof loaderConfig === 'object' &&
-        loaderConfig.loader === require.resolve('raw-loader')
-      ) {
-        return {
-          loader: require.resolve('style-loader'),
-        };
-      }
-      return loaderConfig;
-    });
-    return rule;
-  });
-
-  const loaderModulesOptions = {
-    modules: {
-      mode: 'local',
-      getLocalIdent: getCSSModuleLocalIdent,
-    },
-    importLoaders: 1,
-  };
-  const postcssOptions: PostcssOptions = () => ({
-    plugins: [
-      postcssImports({
-        addModulesDirectories: includePaths,
-        resolve: (url: string) => (url.startsWith('~') ? url.slice(1) : url),
-      }),
-    ],
-  });
-  // If a path to postcssConfig is passed in, set it for app and all libs, otherwise
-  // use automatic detection.
-  if (typeof postcssConfig === 'string') {
-    postcssOptions.config = path.join(workspaceRoot, postcssConfig);
-  }
-
-  const commonLoaders = [
-    {
-      loader: extractCss
-        ? MiniCssExtractPlugin.loader
-        : require.resolve('style-loader'),
-    },
-    {
-      loader: require.resolve('css-loader'),
-      options: loaderModulesOptions,
-    },
-    {
-      loader: require.resolve('postcss-loader'),
-      options: {
-        implementation: require('postcss'),
-        postcssOptions: postcssOptions,
-      },
-    },
-  ];
-
-  partial.module.rules = [
-    {
-      test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
-      oneOf: [
-        {
-          test: /\.module\.css$/,
-          use: commonLoaders,
-        },
-        {
-          test: /\.module\.(scss|sass)$/,
-          use: [
-            ...commonLoaders,
-            {
-              loader: require.resolve('sass-loader'),
-              options: {
-                implementation: require('sass'),
-                sassOptions: {
-                  fiber: false,
-                  precision: 8,
-                  includePaths,
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.module\.less$/,
-          use: [
-            ...commonLoaders,
-            {
-              loader: require.resolve('less-loader'),
-              options: {
-                lessOptions: {
-                  paths: includePaths,
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.module\.styl$/,
-          use: [
-            ...commonLoaders,
-            {
-              loader: require.resolve('stylus-loader'),
-              options: {
-                stylusOptions: {
-                  include: includePaths,
-                },
-              },
-            },
-          ],
-        },
-        ...rules,
-      ],
-    },
-  ];
-  return partial;
-}
-
-export function getPolyfillsPartial(
-  polyfills: string,
-  es2015Polyfills: string,
-  esm: boolean,
-  isScriptOptimizeOn: boolean
 ): Configuration {
-  const config = {
-    entry: {} as { [key: string]: string[] },
-  };
-
-  if (polyfills && esm && isScriptOptimizeOn) {
-    // Safari 10.1 supports <script type="module"> but not <script nomodule>.
-    // Need to patch it up so the browser doesn't load both sets.
-    config.entry.polyfills = [
-      require.resolve('@nrwl/webpack/src/utils/webpack/safari-nomodule.js'),
-      ...(polyfills ? [polyfills] : []),
-    ];
-  } else if (es2015Polyfills && !esm && isScriptOptimizeOn) {
-    config.entry.polyfills = [
-      es2015Polyfills,
-      ...(polyfills ? [polyfills] : []),
-    ];
-  } else {
-    if (polyfills) {
-      config.entry.polyfills = [polyfills];
-    }
-    if (es2015Polyfills) {
-      config.entry['polyfills-es5'] = [es2015Polyfills];
-    }
-  }
-
-  return config;
-}
-
-export function getCSSModuleLocalIdent(
-  context,
-  localIdentName,
-  localName,
-  options
-) {
-  // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
-  const fileNameOrFolder = context.resourcePath.match(
-    /index\.module\.(css|scss|sass|styl)$/
-  )
-    ? '[folder]'
-    : '[name]';
-  // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
-  const hash = getHashDigest(
-    posix.relative(context.rootContext, context.resourcePath) + localName,
-    'md5',
-    'base64',
-    5
-  );
-  // Use loaderUtils to find the file or folder name
-  const className = interpolateName(
-    context,
-    `${fileNameOrFolder}_${localName}__${hash}`,
-    options
-  );
-  // Remove the .module that appears in every classname when based on the file and replace all "." with "_".
-  return className.replace('.module_', '_').replace(/\./g, '_');
-}
-
-export function convertBuildOptions(
-  buildOptions: NormalizedWebpackExecutorOptions
-): any {
-  const options = buildOptions as any;
-  return {
-    ...options,
-    buildOptimizer: options.optimization,
-    forkTypeChecker: false,
-    lazyModules: [] as string[],
-  };
+  const config: Configuration = {};
+  const configure = composePlugins(withNx(), withWeb());
+  return configure(config, { options, context });
 }
diff --git a/packages/webpack/src/executors/webpack/lib/normalize-options.ts b/packages/webpack/src/executors/webpack/lib/normalize-options.ts
index 6f201bd2f491cc..1e2ec1a3aa801e 100644
--- a/packages/webpack/src/executors/webpack/lib/normalize-options.ts
+++ b/packages/webpack/src/executors/webpack/lib/normalize-options.ts
@@ -5,8 +5,8 @@ import { normalizePath } from '@nrwl/devkit';
 import type {
   AssetGlobPattern,
   FileReplacement,
-  WebpackExecutorOptions,
   NormalizedWebpackExecutorOptions,
+  WebpackExecutorOptions,
 } from '../schema';
 
 export function normalizeOptions(
@@ -34,11 +34,9 @@ export function normalizeOptions(
           }
         : options.optimization,
     polyfills: options.polyfills ? resolve(root, options.polyfills) : undefined,
-    es2015Polyfills: options.es2015Polyfills
-      ? resolve(root, options.es2015Polyfills)
-      : undefined,
   };
 }
+
 function normalizeFileReplacements(
   root: string,
   fileReplacements: FileReplacement[]
diff --git a/packages/webpack/src/executors/webpack/schema.d.ts b/packages/webpack/src/executors/webpack/schema.d.ts
index edf7e477f08ecd..5c0e97f920f641 100644
--- a/packages/webpack/src/executors/webpack/schema.d.ts
+++ b/packages/webpack/src/executors/webpack/schema.d.ts
@@ -47,7 +47,6 @@ export interface WebpackExecutorOptions {
   crossOrigin?: CrossOriginValue;
   deleteOutputPath?: boolean;
   deployUrl?: string;
-  es2015Polyfills?: string;
   externalDependencies?: 'all' | 'none' | string[];
   extractCss?: boolean;
   extractLicenses?: boolean;
diff --git a/packages/webpack/src/executors/webpack/schema.json b/packages/webpack/src/executors/webpack/schema.json
index 53e09f38040094..d0a6a58682710f 100644
--- a/packages/webpack/src/executors/webpack/schema.json
+++ b/packages/webpack/src/executors/webpack/schema.json
@@ -228,10 +228,6 @@
       "description": "Extract CSS into a `.css` file.",
       "default": true
     },
-    "es2015Polyfills": {
-      "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-      "type": "string"
-    },
     "subresourceIntegrity": {
       "type": "boolean",
       "description": "Enables the use of subresource integrity validation.",
diff --git a/packages/webpack/src/executors/webpack/webpack.impl.ts b/packages/webpack/src/executors/webpack/webpack.impl.ts
index a12cf27c37f07e..4039725cedbb98 100644
--- a/packages/webpack/src/executors/webpack/webpack.impl.ts
+++ b/packages/webpack/src/executors/webpack/webpack.impl.ts
@@ -1,26 +1,18 @@
 import 'dotenv/config';
 import { ExecutorContext, logger } from '@nrwl/devkit';
 import { eachValueFrom } from '@nrwl/devkit/src/utils/rxjs-for-await';
-import type { Configuration, Stats } from 'webpack';
-import { from, of } from 'rxjs';
-import {
-  bufferCount,
-  mergeMap,
-  mergeScan,
-  switchMap,
-  tap,
-} from 'rxjs/operators';
+import type { Configuration } from 'webpack';
+import { of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
 import { basename, join, resolve } from 'path';
 import {
   calculateProjectDependencies,
   createTmpTsConfig,
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
-import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript';
 
 import { getWebpackConfig } from './lib/get-webpack-config';
 import { getEmittedFiles } from './lib/get-emitted-files';
 import { runWebpack } from './lib/run-webpack';
-import { BuildBrowserFeatures } from '../../utils/webpack/build-browser-features';
 import { deleteOutputDir } from '../../utils/fs';
 import { writeIndexHtml } from '../../utils/webpack/write-index-html';
 import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
@@ -34,7 +26,7 @@ import { EmittedFile } from '../../utils/models';
 async function getWebpackConfigs(
   options: NormalizedWebpackExecutorOptions,
   context: ExecutorContext
-): Promise<Configuration[]> {
+): Promise<Configuration> {
   const metadata = context.projectsConfigurations.projects[context.projectName];
   const projectRoot = metadata.root;
   const isScriptOptimizeOn =
@@ -43,13 +35,6 @@ async function getWebpackConfigs(
       : options.optimization && options.optimization.scripts
       ? options.optimization.scripts
       : false;
-  const tsConfig = readTsConfig(options.tsConfig);
-  const scriptTarget = tsConfig.options.target;
-
-  const buildBrowserFeatures = new BuildBrowserFeatures(
-    projectRoot,
-    scriptTarget
-  );
 
   let customWebpack = null;
 
@@ -64,30 +49,17 @@ async function getWebpackConfigs(
     }
   }
 
-  return await Promise.all(
-    [
-      // ESM build for modern browsers.
-      getWebpackConfig(context, options, true, isScriptOptimizeOn),
-      // ES5 build for legacy browsers.
-      options.target === 'web' &&
-      isScriptOptimizeOn &&
-      buildBrowserFeatures.isDifferentialLoadingNeeded()
-        ? getWebpackConfig(context, options, false, isScriptOptimizeOn)
-        : undefined,
-    ]
-      .filter(Boolean)
-      .map(async (config) => {
-        if (customWebpack) {
-          return await customWebpack(config, {
-            options,
-            context,
-            configuration: context.configurationName, // backwards compat
-          });
-        } else {
-          return config;
-        }
-      })
-  );
+  const config = getWebpackConfig(context, options, isScriptOptimizeOn);
+
+  if (customWebpack) {
+    return await customWebpack(config, {
+      options,
+      context,
+      configuration: context.configurationName, // backwards compat
+    });
+  } else {
+    return config;
+  }
 }
 
 export type WebpackExecutorEvent =
@@ -162,40 +134,26 @@ export async function* webpackExecutor(
 
   const configs = await getWebpackConfigs(options, context);
   return yield* eachValueFrom(
-    from(configs).pipe(
-      mergeMap((config) => (Array.isArray(config) ? from(config) : of(config))),
-      // Run build sequentially and bail when first one fails.
-      mergeScan(
-        (acc, config) => {
-          if (!acc.hasErrors()) {
-            return runWebpack(config).pipe(
-              tap((stats) => {
-                console.info(stats.toString(config.stats));
-              })
-            );
-          } else {
-            return of();
-          }
-        },
-        { hasErrors: () => false } as Stats,
-        1
-      ),
-      // Collect build results as an array.
-      bufferCount(configs.length),
-      switchMap(async ([result1, result2]) => {
-        const success =
-          result1 && !result1.hasErrors() && (!result2 || !result2.hasErrors());
-        const emittedFiles1 = getEmittedFiles(result1);
-        const emittedFiles2 = result2 ? getEmittedFiles(result2) : [];
+    of(configs).pipe(
+      switchMap((config) => {
+        return runWebpack(config).pipe(
+          tap((stats) => {
+            console.info(stats.toString());
+          })
+        );
+      }),
+      switchMap(async (result) => {
+        const success = result && !result.hasErrors();
+        const emittedFiles = getEmittedFiles(result);
         if (options.index && options.generateIndexHtml) {
           await writeIndexHtml({
             crossOrigin: options.crossOrigin,
             sri: options.subresourceIntegrity,
             outputPath: join(options.outputPath, basename(options.index)),
             indexPath: join(context.root, options.index),
-            files: emittedFiles1.filter((x) => x.extension === '.css'),
-            noModuleFiles: emittedFiles2,
-            moduleFiles: emittedFiles1,
+            files: emittedFiles.filter((x) => x.extension === '.css'),
+            noModuleFiles: [],
+            moduleFiles: emittedFiles,
             baseHref: options.baseHref,
             deployUrl: options.deployUrl,
             scripts: options.scripts,
@@ -209,7 +167,7 @@ export async function* webpackExecutor(
             options.outputPath,
             options.outputFileName
           ),
-          emittedFiles: [...emittedFiles1, ...emittedFiles2],
+          emittedFiles,
           options,
         };
       })
diff --git a/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.spec.ts b/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.spec.ts
new file mode 100644
index 00000000000000..8396bfc987a133
--- /dev/null
+++ b/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.spec.ts
@@ -0,0 +1,67 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+} from '@nrwl/devkit';
+import update from './remove-es2015-polyfills-option';
+
+describe('15.4.5 migration (remove es2015-polyfills)', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should update all executors using @nrwl/webpack:webpack and es2015Polyfills option', async () => {
+    addProjectConfiguration(tree, 'app1', {
+      root: 'app1',
+      targets: {
+        build: {
+          executor: '@nrwl/webpack:webpack',
+          options: {
+            es2015Polyfills: 'app1/polyfills.ts',
+          },
+        },
+      },
+    });
+    addProjectConfiguration(tree, 'app2', {
+      root: 'app2',
+      targets: {
+        custom: {
+          executor: '@nrwl/webpack:webpack',
+          options: {
+            es2016Polyfills: 'app2/polyfills.ts',
+          },
+        },
+      },
+    });
+    addProjectConfiguration(tree, 'app3', {
+      root: 'app3',
+      targets: {
+        custom: {
+          executor: '@foo/bar:faz',
+          options: {
+            es2015Polyfills: 'app3/polyfills.ts',
+          },
+        },
+      },
+    });
+
+    await update(tree);
+
+    expect(
+      readProjectConfiguration(tree, 'app1').targets.build.options
+        .es2015Polyfills
+    ).toBeUndefined();
+    expect(
+      readProjectConfiguration(tree, 'app2').targets.custom.options
+        .es2015Polyfills
+    ).toBeUndefined();
+    // Another executor, left intact.
+    expect(
+      readProjectConfiguration(tree, 'app3').targets.custom.options
+        .es2015Polyfills
+    ).toEqual('app3/polyfills.ts');
+  });
+});
diff --git a/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.ts b/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.ts
new file mode 100644
index 00000000000000..5b84820f201f3b
--- /dev/null
+++ b/packages/webpack/src/migrations/update-15-4-5/remove-es2015-polyfills-option.ts
@@ -0,0 +1,22 @@
+import { getProjects, Tree, updateProjectConfiguration } from '@nrwl/devkit';
+
+export default async function (tree: Tree) {
+  const projects = getProjects(tree);
+  projects.forEach((p) => {
+    let shouldUpdate = false;
+
+    Object.entries(p.targets).forEach(([name, config]) => {
+      if (
+        p.targets?.[name]?.executor === '@nrwl/webpack:webpack' &&
+        p.targets?.[name]?.options.es2015Polyfills
+      ) {
+        delete p.targets?.[name]?.options.es2015Polyfills;
+        shouldUpdate = true;
+      }
+    });
+
+    if (shouldUpdate) {
+      updateProjectConfiguration(tree, p.name, p);
+    }
+  });
+}
diff --git a/packages/webpack/src/utils/generate-package-json-webpack-plugin.ts b/packages/webpack/src/plugins/generate-package-json-webpack-plugin.ts
similarity index 100%
rename from packages/webpack/src/utils/generate-package-json-webpack-plugin.ts
rename to packages/webpack/src/plugins/generate-package-json-webpack-plugin.ts
diff --git a/packages/webpack/src/plugins/stats-json-plugin.ts b/packages/webpack/src/plugins/stats-json-plugin.ts
new file mode 100644
index 00000000000000..c6050713267d50
--- /dev/null
+++ b/packages/webpack/src/plugins/stats-json-plugin.ts
@@ -0,0 +1,10 @@
+import { Compiler, sources } from 'webpack';
+
+export class StatsJsonPlugin {
+  apply(compiler: Compiler) {
+    compiler.hooks.emit.tap('angular-cli-stats', (compilation) => {
+      const data = JSON.stringify(compilation.getStats().toJson('verbose'));
+      compilation.assets[`stats.json`] = new sources.RawSource(data);
+    });
+  }
+}
diff --git a/packages/webpack/src/utils/config.ts b/packages/webpack/src/utils/config.ts
index 68a1525375ba3b..19d1025b2a6fe7 100644
--- a/packages/webpack/src/utils/config.ts
+++ b/packages/webpack/src/utils/config.ts
@@ -1,427 +1,39 @@
-import { join, parse } from 'path';
-import * as webpack from 'webpack';
-import { Configuration, WebpackPluginInstance } from 'webpack';
-import { LicenseWebpackPlugin } from 'license-webpack-plugin';
-import * as CopyWebpackPlugin from 'copy-webpack-plugin';
-import { getOutputHashFormat } from './hash-format';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+import { Configuration } from 'webpack';
 import { ExecutorContext } from '@nrwl/devkit';
-import { loadTsTransformers } from '@nrwl/js';
 
-import {
-  AssetGlobPattern,
-  NormalizedWebpackExecutorOptions,
-} from '../executors/webpack/schema';
-import { GeneratePackageJsonWebpackPlugin } from './generate-package-json-webpack-plugin';
-import nodeExternals = require('webpack-node-externals');
-import TerserPlugin = require('terser-webpack-plugin');
-import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-const IGNORED_WEBPACK_WARNINGS = [
-  /The comment file/i,
-  /could not find any license/i,
-];
-
-export interface InternalBuildOptions {
-  esm?: boolean;
-  isScriptOptimizeOn?: boolean;
-  emitDecoratorMetadata?: boolean;
-  configuration?: string;
-  skipTypeCheck?: boolean;
-}
-
-const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
+import { NormalizedWebpackExecutorOptions } from '../executors/webpack/schema';
+import { withNx } from './with-nx';
+import { withWeb } from './with-web';
 
+/** @deprecated use withNx and withWeb plugins directly */
 export function getBaseWebpackPartial(
   options: NormalizedWebpackExecutorOptions,
-  internalOptions: InternalBuildOptions,
   context?: ExecutorContext
 ): Configuration {
-  // If the function is called directly and not through `@nrwl/webpack:webpack` then this target may not be set.
-  options.target ??= 'web';
-
-  const mainFields = [
-    ...(internalOptions.esm ? ['es2015'] : []),
-    'module',
-    'main',
-  ];
-  const hashFormat = getOutputHashFormat(options.outputHashing);
-  const suffixFormat = internalOptions.esm ? '' : '.es5';
-  const filename = internalOptions.isScriptOptimizeOn
-    ? `[name]${hashFormat.script}${suffixFormat}.js`
-    : '[name].js';
-  const chunkFilename = internalOptions.isScriptOptimizeOn
-    ? `[name]${hashFormat.chunk}${suffixFormat}.js`
-    : '[name].js';
-  const mode = internalOptions.isScriptOptimizeOn
-    ? 'production'
-    : 'development';
+  const config: Configuration = {};
+  const configure = composePlugins(withNx(), withWeb());
+  return configure(config, { options, context });
+}
 
-  let mainEntry = 'main';
-  if (options.outputFileName) {
-    mainEntry = parse(options.outputFileName).name;
+export type NxWebpackPlugin = (
+  config: Configuration,
+  ctx: {
+    options: NormalizedWebpackExecutorOptions;
+    context: ExecutorContext;
   }
-  const additionalEntryPoints =
-    options.additionalEntryPoints?.reduce(
-      (obj, current) => ({
-        ...obj,
-        [current.entryName]: current.entryPath,
-      }),
-      {} as { [entryName: string]: string }
-    ) ?? {};
+) => Configuration;
 
-  const webpackConfig: Configuration = {
-    target: options.target,
-    entry: {
-      [mainEntry]: [options.main],
-      ...additionalEntryPoints,
-    },
-    devtool:
-      options.sourceMap === 'hidden'
-        ? 'hidden-source-map'
-        : options.sourceMap
-        ? 'source-map'
-        : false,
-    mode,
-    output: {
-      path: options.outputPath,
-      filename,
-      chunkFilename,
-      hashFunction: 'xxhash64',
-      // Disabled for performance
-      pathinfo: false,
-      scriptType: internalOptions.esm ? 'module' : undefined,
-    },
-    module: {
-      // Enabled for performance
-      unsafeCache: true,
-      rules: [
-        options.target === 'web' && {
-          test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
-          type: 'asset',
-          parser: {
-            dataUrlCondition: {
-              maxSize: 10_000, // 10 kB
-            },
-          },
-        },
-        {
-          // There's an issue resolving paths without fully specified extensions
-          // See: https://github.com/graphql/graphql-js/issues/2721
-          // TODO(jack): Add a flag to turn this option on like Next.js does via experimental flag.
-          // See: https://github.com/vercel/next.js/pull/29880
-          test: /\.m?jsx?$/,
-          resolve: {
-            fullySpecified: false,
-          },
-        },
-        // There's an issue when using buildable libs and .js files (instead of .ts files),
-        // where the wrong type is used (commonjs vs esm) resulting in export-imports throwing errors.
-        // See: https://github.com/nrwl/nx/issues/10990
-        {
-          test: /\.js$/,
-          type: 'javascript/auto',
-        },
-        createLoaderFromCompiler(options, internalOptions),
-      ].filter(Boolean),
-    },
-    resolve: {
-      extensions,
-      alias: getAliases(options),
-      plugins: [
-        new TsconfigPathsPlugin({
-          configFile: options.tsConfig,
-          extensions,
-          mainFields,
-        }) as never, // TODO: Remove never type when 'tsconfig-paths-webpack-plugin' types fixed
-      ],
-      mainFields,
-    },
-    performance: {
-      hints: false,
-    },
-    plugins: [],
-    watch: options.watch,
-    watchOptions: {
-      poll: options.poll,
-    },
-    stats: getStatsConfig(options),
-    ignoreWarnings: [
-      (x) =>
-        IGNORED_WEBPACK_WARNINGS.some((r) =>
-          typeof x === 'string' ? r.test(x) : r.test(x.message)
-        ),
-    ],
-    experiments: {
-      cacheUnaffected: true,
-    },
-  };
-
-  if (options.target === 'node') {
-    webpackConfig.output.libraryTarget = 'commonjs';
-    webpackConfig.node = false;
-
-    // could be an object { scripts: boolean; styles: boolean }
-    if (internalOptions.isScriptOptimizeOn) {
-      webpackConfig.optimization = {
-        minimize: true,
-        minimizer: [
-          new TerserPlugin({
-            terserOptions: {
-              mangle: false,
-              keep_classnames: true,
-            },
-          }),
-        ],
-        concatenateModules: true,
-      };
+export function composePlugins(...plugins: NxWebpackPlugin[]) {
+  return function combined(
+    config: Configuration,
+    ctx: {
+      options: NormalizedWebpackExecutorOptions;
+      context: ExecutorContext;
     }
-  } else {
-    webpackConfig.plugins.push(
-      new webpack.DefinePlugin(getClientEnvironment(mode).stringified)
-    );
-    if (options.compiler !== 'swc' && internalOptions.isScriptOptimizeOn) {
-      webpackConfig.optimization = {
-        sideEffects: true,
-        minimizer: [
-          new TerserPlugin({
-            parallel: true,
-            terserOptions: {
-              ecma: (internalOptions.esm ? 2016 : 5) as TerserPlugin.TerserECMA,
-              safari10: true,
-              output: {
-                ascii_only: true,
-                comments: false,
-                webkit: true,
-              },
-            },
-          }),
-        ],
-        runtimeChunk: true,
-      };
+  ): Configuration {
+    for (const plugin of plugins) {
+      config = plugin(config, ctx);
     }
-    webpackConfig.optimization ??= {};
-    webpackConfig.optimization.nodeEnv = process.env.NODE_ENV ?? mode;
-  }
-
-  const extraPlugins: WebpackPluginInstance[] = [];
-
-  if (!internalOptions.skipTypeCheck && internalOptions.esm) {
-    extraPlugins.push(
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          configFile: options.tsConfig,
-          memoryLimit: options.memoryLimit || 2018,
-        },
-      })
-    );
-  }
-
-  if (options.progress) {
-    extraPlugins.push(new webpack.ProgressPlugin());
-  }
-
-  // TODO  LicenseWebpackPlugin needs a PR for proper typing
-  if (options.extractLicenses) {
-    extraPlugins.push(
-      new LicenseWebpackPlugin({
-        stats: {
-          errors: false,
-        },
-        perChunkOutput: false,
-        outputFilename: `3rdpartylicenses.txt`,
-      }) as unknown as WebpackPluginInstance
-    );
-  }
-
-  if (Array.isArray(options.assets) && options.assets.length > 0) {
-    extraPlugins.push(createCopyPlugin(options.assets));
-  }
-
-  if (
-    options.target === 'node' &&
-    options.externalDependencies === 'all' &&
-    context
-  ) {
-    const modulesDir = `${context.root}/node_modules`;
-    webpackConfig.externals = [nodeExternals({ modulesDir })];
-  } else if (Array.isArray(options.externalDependencies)) {
-    webpackConfig.externals = [
-      function (context, callback: Function) {
-        if (options.externalDependencies.includes(context.request)) {
-          // not bundled
-          return callback(null, `commonjs ${context.request}`);
-        }
-        // bundled
-        callback();
-      },
-    ];
-  }
-
-  if (options.generatePackageJson && context) {
-    extraPlugins.push(new GeneratePackageJsonWebpackPlugin(context, options));
-  }
-
-  webpackConfig.plugins = [...webpackConfig.plugins, ...extraPlugins];
-
-  return webpackConfig;
-}
-
-function getAliases(options: NormalizedWebpackExecutorOptions): {
-  [key: string]: string;
-} {
-  return options.fileReplacements.reduce(
-    (aliases, replacement) => ({
-      ...aliases,
-      [replacement.replace]: replacement.with,
-    }),
-    {}
-  );
-}
-
-function getStatsConfig(options: NormalizedWebpackExecutorOptions) {
-  return {
-    hash: true,
-    timings: false,
-    cached: false,
-    cachedAssets: false,
-    modules: false,
-    warnings: true,
-    errors: true,
-    colors: !options.verbose && !options.statsJson,
-    chunks: !options.verbose,
-    assets: !!options.verbose,
-    chunkOrigins: !!options.verbose,
-    chunkModules: !!options.verbose,
-    children: !!options.verbose,
-    reasons: !!options.verbose,
-    version: !!options.verbose,
-    errorDetails: !!options.verbose,
-    moduleTrace: !!options.verbose,
-    usedExports: !!options.verbose,
-  };
-}
-
-export function getClientEnvironment(mode) {
-  // Grab NODE_ENV and NX_* environment variables and prepare them to be
-  // injected into the application via DefinePlugin in webpack configuration.
-  const NX_APP = /^NX_/i;
-
-  const raw = Object.keys(process.env)
-    .filter((key) => NX_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        NODE_ENV: process.env.NODE_ENV || mode,
-      }
-    );
-
-  // Stringify all values so we can feed into webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
+    return config;
   };
-
-  return { stringified };
-}
-
-export function createCopyPlugin(assets: AssetGlobPattern[]) {
-  return new CopyWebpackPlugin({
-    patterns: assets.map((asset) => {
-      return {
-        context: asset.input,
-        // Now we remove starting slash to make Webpack place it from the output root.
-        to: asset.output,
-        from: asset.glob,
-        globOptions: {
-          ignore: [
-            '.gitkeep',
-            '**/.DS_Store',
-            '**/Thumbs.db',
-            ...(asset.ignore ?? []),
-          ],
-          dot: true,
-        },
-      };
-    }),
-  });
-}
-
-export function createLoaderFromCompiler(
-  options: NormalizedWebpackExecutorOptions,
-  extraOptions: InternalBuildOptions
-) {
-  switch (options.compiler) {
-    case 'swc':
-      return {
-        test: /\.([jt])sx?$/,
-        loader: require.resolve('swc-loader'),
-        exclude: /node_modules/,
-        options: {
-          jsc: {
-            parser: {
-              syntax: 'typescript',
-              decorators: true,
-              tsx: true,
-            },
-            transform: {
-              react: {
-                runtime: 'automatic',
-              },
-            },
-            loose: true,
-          },
-        },
-      };
-    case 'tsc':
-      const { compilerPluginHooks, hasPlugin } = loadTsTransformers(
-        options.transformers
-      );
-      return {
-        test: /\.([jt])sx?$/,
-        loader: require.resolve(`ts-loader`),
-        exclude: /node_modules/,
-        options: {
-          configFile: options.tsConfig,
-          transpileOnly: !hasPlugin,
-          // https://github.com/TypeStrong/ts-loader/pull/685
-          experimentalWatchApi: true,
-          getCustomTransformers: (program) => ({
-            before: compilerPluginHooks.beforeHooks.map((hook) =>
-              hook(program)
-            ),
-            after: compilerPluginHooks.afterHooks.map((hook) => hook(program)),
-            afterDeclarations: compilerPluginHooks.afterDeclarationsHooks.map(
-              (hook) => hook(program)
-            ),
-          }),
-        },
-      };
-    case 'babel':
-      return {
-        test: /\.([jt])sx?$/,
-        loader: join(__dirname, 'web-babel-loader'),
-        exclude: /node_modules/,
-        options: {
-          rootMode: 'upward',
-          cwd: join(options.root, options.sourceRoot),
-          emitDecoratorMetadata: extraOptions.emitDecoratorMetadata,
-          isModern: extraOptions.esm,
-          envName: extraOptions.isScriptOptimizeOn
-            ? 'production'
-            : extraOptions.configuration,
-          babelrc: true,
-          cacheDirectory: true,
-          cacheCompression: false,
-        },
-      };
-    default:
-      return null;
-  }
 }
diff --git a/packages/webpack/src/utils/create-copy-plugin.ts b/packages/webpack/src/utils/create-copy-plugin.ts
new file mode 100644
index 00000000000000..41b30683d98748
--- /dev/null
+++ b/packages/webpack/src/utils/create-copy-plugin.ts
@@ -0,0 +1,24 @@
+import * as CopyWebpackPlugin from 'copy-webpack-plugin';
+import { AssetGlobPattern } from '../executors/webpack/schema';
+
+export function createCopyPlugin(assets: AssetGlobPattern[]) {
+  return new CopyWebpackPlugin({
+    patterns: assets.map((asset) => {
+      return {
+        context: asset.input,
+        // Now we remove starting slash to make Webpack place it from the output root.
+        to: asset.output,
+        from: asset.glob,
+        globOptions: {
+          ignore: [
+            '.gitkeep',
+            '**/.DS_Store',
+            '**/Thumbs.db',
+            ...(asset.ignore ?? []),
+          ],
+          dot: true,
+        },
+      };
+    }),
+  });
+}
diff --git a/packages/webpack/src/utils/get-client-environment.ts b/packages/webpack/src/utils/get-client-environment.ts
new file mode 100644
index 00000000000000..a4a10b626fbea5
--- /dev/null
+++ b/packages/webpack/src/utils/get-client-environment.ts
@@ -0,0 +1,30 @@
+export function getClientEnvironment(mode) {
+  // Grab NODE_ENV and NX_* environment variables and prepare them to be
+  // injected into the application via DefinePlugin in webpack configuration.
+  const NX_APP = /^NX_/i;
+
+  const raw = Object.keys(process.env)
+    .filter((key) => NX_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      // If mode is dev or prod then webpack already defines this variable for us.
+      mode === 'development' || mode === 'production'
+        ? {}
+        : {
+            NODE_ENV: process.env.NODE_ENV,
+          }
+    );
+
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { stringified };
+}
diff --git a/packages/webpack/src/utils/get-css-module-local-ident.ts b/packages/webpack/src/utils/get-css-module-local-ident.ts
new file mode 100644
index 00000000000000..55c0ec17bc8ffd
--- /dev/null
+++ b/packages/webpack/src/utils/get-css-module-local-ident.ts
@@ -0,0 +1,31 @@
+import { posix } from 'path';
+import { getHashDigest, interpolateName } from 'loader-utils';
+
+export function getCSSModuleLocalIdent(
+  ctx,
+  localIdentName,
+  localName,
+  options
+) {
+  // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
+  const fileNameOrFolder = ctx.resourcePath.match(
+    /index\.module\.(css|scss|sass|styl)$/
+  )
+    ? '[folder]'
+    : '[name]';
+  // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
+  const hash = getHashDigest(
+    posix.relative(ctx.rootContext, ctx.resourcePath) + localName,
+    'md5',
+    'base64',
+    5
+  );
+  // Use loaderUtils to find the file or folder name
+  const className = interpolateName(
+    ctx,
+    `${fileNameOrFolder}_${localName}__${hash}`,
+    options
+  );
+  // Remove the .module that appears in every classname when based on the file and replace all "." with "_".
+  return className.replace('.module_', '_').replace(/\./g, '_');
+}
diff --git a/packages/webpack/src/utils/models.ts b/packages/webpack/src/utils/models.ts
index 663f0d483f4246..3222e5367123f1 100644
--- a/packages/webpack/src/utils/models.ts
+++ b/packages/webpack/src/utils/models.ts
@@ -2,12 +2,10 @@ export type ExtraEntryPoint = ExtraEntryPointClass | string;
 
 export interface ExtraEntryPointClass {
   bundleName?: string;
-  inject?: boolean;
   input: string;
-  lazy?: boolean;
 }
 
-export type NormalizedEntryPoint = Required<Omit<ExtraEntryPointClass, 'lazy'>>;
+export type NormalizedEntryPoint = Required<ExtraEntryPointClass>;
 
 export interface EmittedFile {
   id?: string;
@@ -25,5 +23,4 @@ export interface CreateWebpackConfigOptions<T = any> {
   buildOptions: T;
   tsConfig: any;
   tsConfigPath: string;
-  supportES2015: boolean;
 }
diff --git a/packages/webpack/src/utils/webpack/build-browser-features.spec.ts b/packages/webpack/src/utils/webpack/build-browser-features.spec.ts
deleted file mode 100644
index ed5d7ba5a99b8f..00000000000000
--- a/packages/webpack/src/utils/webpack/build-browser-features.spec.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { fs, vol } from 'memfs';
-jest.mock('fs', () => fs);
-import { ScriptTarget } from 'typescript';
-
-// Disable browserslist cache so that each test resolves a new config.
-process.env.BROWSERSLIST_DISABLE_CACHE = 'true';
-
-import { BuildBrowserFeatures } from './build-browser-features';
-
-describe('BuildBrowserFeatures', () => {
-  beforeEach(async () => {
-    vol.fromJSON(
-      {
-        '.browserslistrc': '',
-      },
-      '/root'
-    );
-  });
-
-  describe('isDifferentialLoadingNeeded', () => {
-    it('should be true for for IE 9-11 and ES2015', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'IE 9-11');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(true);
-    });
-
-    it('should be false for Chrome and ES2015', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false);
-    });
-
-    it('detects no need for differential loading for target is ES5', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES5
-      );
-      expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false);
-    });
-
-    it('should be false for Safari 10.1 when target is ES2015', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isDifferentialLoadingNeeded()).toBe(false);
-    });
-  });
-
-  describe('isFeatureSupported', () => {
-    it('should be true for es6-module and Safari 10.1', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true);
-    });
-
-    it('should be false for es6-module and IE9', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'IE 9');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(false);
-    });
-
-    it('should be true for es6-module and last 1 chrome version', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'last 1 chrome version');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true);
-    });
-
-    it('should be true for es6-module and Edge 18', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Edge 18');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isFeatureSupported('es6-module')).toBe(true);
-    });
-  });
-
-  describe('isNoModulePolyfillNeeded', () => {
-    it('should be false for Safari 10.1 when target is ES5', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES5
-      );
-      expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false);
-    });
-
-    it('should be false for Safari 10.1 when target is ES2015', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari 10.1');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false);
-    });
-
-    it('should be true for Safari 9+ when target is ES2015', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari >= 9');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(true);
-    });
-
-    it('should be false for Safari 9+ when target is ES5', () => {
-      fs.writeFileSync('/root/.browserslistrc', 'Safari >= 9');
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES5
-      );
-      expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false);
-    });
-
-    it('should be false when not supporting Safari 10.1 target is ES2015', () => {
-      fs.writeFileSync(
-        '/root/.browserslistrc',
-        `
-            Edge 18
-            IE 9
-          `
-      );
-
-      const buildBrowserFeatures = new BuildBrowserFeatures(
-        '/root',
-        ScriptTarget.ES2015
-      );
-      expect(buildBrowserFeatures.isNoModulePolyfillNeeded()).toBe(false);
-    });
-  });
-});
diff --git a/packages/webpack/src/utils/webpack/build-browser-features.ts b/packages/webpack/src/utils/webpack/build-browser-features.ts
deleted file mode 100644
index 790c31ffdf675b..00000000000000
--- a/packages/webpack/src/utils/webpack/build-browser-features.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as browserslist from 'browserslist';
-import { feature, features } from 'caniuse-lite';
-import * as ts from 'typescript';
-
-export class BuildBrowserFeatures {
-  private readonly _supportedBrowsers: string[];
-  private readonly _es6TargetOrLater: boolean;
-
-  constructor(
-    private projectRoot: string,
-    private scriptTarget: ts.ScriptTarget
-  ) {
-    this._supportedBrowsers = browserslist(undefined, {
-      path: this.projectRoot,
-    });
-    this._es6TargetOrLater = this.scriptTarget > ts.ScriptTarget.ES5;
-  }
-
-  /**
-   * True, when one or more browsers requires ES5
-   * support and the script target is ES2015 or greater.
-   */
-  isDifferentialLoadingNeeded(): boolean {
-    return this._es6TargetOrLater && this.isEs5SupportNeeded();
-  }
-
-  /**
-   * True, when one or more browsers requires ES5 support
-   */
-  isEs5SupportNeeded(): boolean {
-    return !this.isFeatureSupported('es6-module');
-  }
-
-  /**
-   * Safari 10.1 and iOS Safari 10.3 supports modules,
-   * but does not support the `nomodule` attribute.
-   * While return `true`, when support for Safari 10.1 and iOS Safari 10.3
-   * is required and in differential loading is enabled.
-   */
-  isNoModulePolyfillNeeded(): boolean {
-    if (!this.isDifferentialLoadingNeeded()) {
-      return false;
-    }
-
-    const safariBrowsers = ['safari 10.1', 'ios_saf 10.3'];
-
-    return this._supportedBrowsers.some((browser) =>
-      safariBrowsers.includes(browser)
-    );
-  }
-
-  /**
-   * True, when a browser feature is supported partially or fully.
-   */
-  isFeatureSupported(featureId: string): boolean {
-    // y: feature is fully available
-    // n: feature is unavailable
-    // a: feature is partially supported
-    // x: feature is prefixed
-    const criteria = ['y', 'a'];
-
-    const data = feature(features[featureId]);
-
-    return !this._supportedBrowsers.some((browser) => {
-      const [agentId, version] = browser.split(' ');
-
-      const browserData = data.stats[agentId];
-      const featureStatus = (browserData && browserData[version]) as
-        | string
-        | undefined;
-
-      // We are only interested in the first character
-      // Ex: when 'a #4 #5', we only need to check for 'a'
-      // as for such cases we should polyfill these features as needed
-      return !featureStatus || !criteria.includes(featureStatus.charAt(0));
-    });
-  }
-}
diff --git a/packages/webpack/src/utils/webpack/normalize-entry.ts b/packages/webpack/src/utils/webpack/normalize-entry.ts
index 6adb374428aedd..aa99dcc67b48ad 100644
--- a/packages/webpack/src/utils/webpack/normalize-entry.ts
+++ b/packages/webpack/src/utils/webpack/normalize-entry.ts
@@ -1,6 +1,3 @@
-import { basename } from 'path';
-import { normalizePath } from '@nrwl/devkit';
-
 import { ExtraEntryPoint, NormalizedEntryPoint } from '../models';
 
 export function normalizeExtraEntryPoints(
@@ -8,34 +5,21 @@ export function normalizeExtraEntryPoints(
   defaultBundleName: string
 ): NormalizedEntryPoint[] {
   return extraEntryPoints.map((entry) => {
-    let normalizedEntry;
     if (typeof entry === 'string') {
-      normalizedEntry = {
+      return {
         input: entry,
-        inject: true,
         bundleName: defaultBundleName,
       };
     } else {
-      const { lazy, inject = true, ...newEntry } = entry;
-      const injectNormalized = entry.lazy !== undefined ? !entry.lazy : inject;
       let bundleName;
 
       if (entry.bundleName) {
         bundleName = entry.bundleName;
-      } else if (!injectNormalized) {
-        // Lazy entry points use the file name as bundle name.
-        bundleName = basename(
-          normalizePath(
-            entry.input.replace(/\.(js|css|scss|sass|less|styl)$/i, '')
-          )
-        );
       } else {
         bundleName = defaultBundleName;
       }
 
-      normalizedEntry = { ...newEntry, inject: injectNormalized, bundleName };
+      return { ...entry, bundleName };
     }
-
-    return normalizedEntry;
   });
 }
diff --git a/packages/webpack/src/utils/webpack/package-chunk-sort.ts b/packages/webpack/src/utils/webpack/package-chunk-sort.ts
index 8f6565a62e164a..97976b0d8730eb 100644
--- a/packages/webpack/src/utils/webpack/package-chunk-sort.ts
+++ b/packages/webpack/src/utils/webpack/package-chunk-sort.ts
@@ -13,18 +13,14 @@ export function generateEntryPoints(appConfig: {
     const entryPoints = normalizeExtraEntryPoints(
       extraEntryPoints,
       defaultBundleName
-    )
-      .filter((entry) => entry.inject)
-      .map((entry) => entry.bundleName);
+    ).map((entry) => entry.bundleName);
 
     // remove duplicates
     return [...new Set(entryPoints)];
   };
 
   const entryPoints = [
-    'polyfills-nomodule-es5',
     'runtime',
-    'polyfills-es5',
     'polyfills',
     'sw-register',
     ...extraEntryPoints(appConfig.styles, 'styles'),
diff --git a/packages/webpack/src/utils/webpack/partials/browser.ts b/packages/webpack/src/utils/webpack/partials/browser.ts
deleted file mode 100644
index 5530da6345b9ff..00000000000000
--- a/packages/webpack/src/utils/webpack/partials/browser.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { LicenseWebpackPlugin } from 'license-webpack-plugin';
-import { ids } from 'webpack';
-import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
-import { CreateWebpackConfigOptions } from '../../models';
-import CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-
-export function getBrowserConfig(wco: CreateWebpackConfigOptions) {
-  const { buildOptions, supportES2015 } = wco;
-  const extraPlugins = [];
-
-  const stylesOptimization =
-    typeof buildOptions.optimization === 'object'
-      ? buildOptions.optimization.styles
-      : buildOptions.optimization;
-
-  if (buildOptions.subresourceIntegrity) {
-    extraPlugins.push(new SubresourceIntegrityPlugin());
-  }
-
-  if (buildOptions.extractLicenses) {
-    extraPlugins.push(
-      new LicenseWebpackPlugin({
-        stats: {
-          warnings: false,
-          errors: false,
-        },
-        perChunkOutput: false,
-        outputFilename: `3rdpartylicenses.txt`,
-      })
-    );
-  }
-
-  const extraMinimizers = [];
-  if (stylesOptimization) {
-    extraMinimizers.push(
-      new CssMinimizerPlugin({
-        test: /\.(?:css|scss|sass|less|styl)$/,
-      })
-    );
-  }
-
-  return {
-    resolve: {
-      mainFields: [
-        ...(supportES2015 ? ['es2015'] : []),
-        'browser',
-        'module',
-        'main',
-      ],
-    },
-    output: {
-      crossOriginLoading: buildOptions.subresourceIntegrity
-        ? ('anonymous' as const)
-        : (false as const),
-    },
-    // context needs to be set for babel to pick up correct babelrc
-    context: wco.projectRoot,
-    optimization: {
-      minimizer: [new ids.HashedModuleIdsPlugin(), ...extraMinimizers],
-      emitOnErrors: false,
-      moduleIds: 'deterministic' as const,
-      runtimeChunk: buildOptions.runtimeChunk ? ('single' as const) : false,
-      splitChunks: {
-        maxAsyncRequests: Infinity,
-        cacheGroups: {
-          default: !!buildOptions.commonChunk && {
-            chunks: 'async' as const,
-            minChunks: 2,
-            priority: 10,
-          },
-          common: !!buildOptions.commonChunk && {
-            name: 'common',
-            chunks: 'async' as const,
-            minChunks: 2,
-            enforce: true,
-            priority: 5,
-          },
-          vendors: false as const,
-          vendor: !!buildOptions.vendorChunk && {
-            name: 'vendor',
-            chunks: (chunk) => chunk.name === 'main',
-            enforce: true,
-            test: /[\\/]node_modules[\\/]/,
-          },
-        },
-      },
-    },
-    plugins: extraPlugins,
-    node: false as false,
-  };
-}
diff --git a/packages/webpack/src/utils/webpack/partials/common.ts b/packages/webpack/src/utils/webpack/partials/common.ts
deleted file mode 100644
index 22578e29dad9ae..00000000000000
--- a/packages/webpack/src/utils/webpack/partials/common.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-import { basename, join, resolve } from 'path';
-import type { Compiler, Configuration } from 'webpack';
-import { ids, ProgressPlugin, sources } from 'webpack';
-import { ScriptTarget } from 'typescript';
-
-import { normalizeExtraEntryPoints } from '../normalize-entry';
-import { ScriptsWebpackPlugin } from '../plugins/scripts-webpack-plugin';
-import { BuildBrowserFeatures } from '../build-browser-features';
-import { getOutputHashFormat } from '../../hash-format';
-import { findAllNodeModules, findUp } from '../../fs';
-import type { CreateWebpackConfigOptions, ExtraEntryPoint } from '../../models';
-
-export function getCommonConfig(
-  wco: CreateWebpackConfigOptions
-): Configuration {
-  const { root, projectRoot, sourceRoot, buildOptions, tsConfig } = wco;
-
-  let stylesOptimization: boolean;
-  let scriptsOptimization: boolean;
-  if (typeof buildOptions.optimization === 'object') {
-    scriptsOptimization = buildOptions.optimization.scripts;
-    stylesOptimization = buildOptions.optimization.styles;
-  } else {
-    scriptsOptimization = stylesOptimization = !!buildOptions.optimization;
-  }
-
-  const nodeModules = findUp('node_modules', projectRoot);
-  if (!nodeModules) {
-    throw new Error('Cannot locate node_modules directory.');
-  }
-
-  // tslint:disable-next-line:no-any
-  const extraPlugins: any[] = [];
-  const entryPoints: { [key: string]: string[] } = {};
-
-  if (buildOptions.main) {
-    entryPoints['main'] = [resolve(root, buildOptions.main)];
-  }
-
-  const buildBrowserFeatures = new BuildBrowserFeatures(
-    projectRoot,
-    tsConfig.options.target || ScriptTarget.ES5
-  );
-
-  const differentialLoadingNeeded =
-    buildBrowserFeatures.isDifferentialLoadingNeeded();
-
-  if (tsConfig.options.target === ScriptTarget.ES5) {
-    if (buildBrowserFeatures.isEs5SupportNeeded()) {
-      // The nomodule polyfill needs to be inject prior to any script and be
-      // outside of webpack compilation because otherwise webpack will cause the
-      // script to be wrapped in window["webpackJsonp"] which causes this to fail.
-      if (buildBrowserFeatures.isNoModulePolyfillNeeded()) {
-        const noModuleScript: ExtraEntryPoint = {
-          bundleName: 'polyfills-nomodule-es5',
-          input: join(__dirname, '..', 'safari-nomodule.js'),
-        };
-        buildOptions.scripts = buildOptions.scripts
-          ? [...buildOptions.scripts, noModuleScript]
-          : [noModuleScript];
-      }
-
-      // For full build differential loading we don't need to generate a seperate polyfill file
-      // because they will be loaded exclusivly based on module and nomodule
-      const polyfillsChunkName = differentialLoadingNeeded
-        ? 'polyfills'
-        : 'polyfills-es5';
-
-      entryPoints[polyfillsChunkName] = [
-        join(__dirname, '..', 'es5-polyfills.js'),
-      ];
-
-      // If not performing a full differential build the polyfills need to be added to ES5 bundle
-      if (buildOptions.polyfills) {
-        entryPoints[polyfillsChunkName].push(
-          resolve(root, buildOptions.polyfills)
-        );
-      }
-    }
-  }
-
-  if (buildOptions.polyfills) {
-    entryPoints['polyfills'] = [
-      ...(entryPoints['polyfills'] || []),
-      resolve(root, buildOptions.polyfills),
-    ];
-  }
-
-  // determine hashing format
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');
-
-  // process global scripts
-  const globalScriptsByBundleName = normalizeExtraEntryPoints(
-    buildOptions.scripts || [],
-    'scripts'
-  ).reduce(
-    (
-      prev: { bundleName: string; paths: string[]; inject: boolean }[],
-      curr
-    ) => {
-      const bundleName = curr.bundleName;
-      const resolvedPath = resolve(root, curr.input);
-      const existingEntry = prev.find((el) => el.bundleName === bundleName);
-      if (existingEntry) {
-        if (existingEntry.inject && !curr.inject) {
-          // All entries have to be lazy for the bundle to be lazy.
-          throw new Error(
-            `The ${curr.bundleName} bundle is mixing injected and non-injected scripts.`
-          );
-        }
-
-        existingEntry.paths.push(resolvedPath);
-      } else {
-        prev.push({
-          bundleName,
-          paths: [resolvedPath],
-          inject: curr.inject,
-        });
-      }
-
-      return prev;
-    },
-    []
-  );
-
-  if (globalScriptsByBundleName.length > 0) {
-    // Add a new asset for each entry.
-    globalScriptsByBundleName.forEach((script) => {
-      // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
-      const hash = script.inject ? hashFormat.script : '';
-      const bundleName = script.bundleName;
-
-      extraPlugins.push(
-        new ScriptsWebpackPlugin({
-          name: bundleName,
-          sourceMap: !!buildOptions.sourceMap,
-          filename: `${basename(bundleName)}${hash}.js`,
-          scripts: script.paths,
-          basePath: sourceRoot,
-        })
-      );
-    });
-  }
-
-  if (buildOptions.progress) {
-    extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));
-  }
-
-  // TODO Needs source exported from webpack
-  if (buildOptions.statsJson) {
-    extraPlugins.push(
-      new (class {
-        apply(compiler: Compiler) {
-          compiler.hooks.emit.tap('angular-cli-stats', (compilation) => {
-            const data = JSON.stringify(
-              compilation.getStats().toJson('verbose')
-            );
-            compilation.assets[`stats.json`] = new sources.RawSource(data);
-          });
-        }
-      })()
-    );
-  }
-
-  let sourceMapUseRule;
-  if (!!buildOptions.sourceMap) {
-    sourceMapUseRule = {
-      use: [
-        {
-          loader: require.resolve('source-map-loader'),
-        },
-      ],
-    };
-  }
-
-  // Allow loaders to be in a node_modules nested inside the devkit/build-angular package.
-  // This is important in case loaders do not get hoisted.
-  // If this file moves to another location, alter potentialNodeModules as well.
-  const loaderNodeModules = findAllNodeModules(__dirname, projectRoot);
-  loaderNodeModules.unshift('node_modules');
-
-  // Load rxjs path aliases.
-  // https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking
-  let alias = {};
-  try {
-    const rxjsPathMappingImport = wco.supportES2015
-      ? 'rxjs/_esm2015/path-mapping'
-      : 'rxjs/_esm5/path-mapping';
-    const rxPaths = require(require.resolve(rxjsPathMappingImport, {
-      paths: [projectRoot],
-    }));
-    alias = rxPaths(nodeModules);
-  } catch {}
-
-  return {
-    profile: buildOptions.statsJson,
-    resolve: {
-      extensions: ['.ts', '.tsx', '.mjs', '.js'],
-      symlinks: true,
-      modules: [wco.tsConfig.options.baseUrl || projectRoot, 'node_modules'],
-      alias,
-    },
-    resolveLoader: {
-      modules: loaderNodeModules,
-    },
-    entry: entryPoints,
-    output: {
-      path: resolve(root, buildOptions.outputPath as string),
-      publicPath: buildOptions.deployUrl,
-    },
-    watch: buildOptions.watch,
-    performance: {
-      hints: false,
-    },
-    module: {
-      // Show an error for missing exports instead of a warning.
-      strictExportPresence: true,
-      rules: [
-        {
-          test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
-          loader: require.resolve('file-loader'),
-          options: {
-            name: `[name]${hashFormat.file}.[ext]`,
-          },
-        },
-        {
-          test: /[\/\\]hot[\/\\]emitter\.js$/,
-          parser: { node: { events: true } },
-        },
-        {
-          test: /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/,
-          parser: { node: { querystring: true } },
-        },
-        {
-          test: /\.js$/,
-          // Factory files are processed by BO in the rules added in typescript.ts.
-          exclude: /(ngfactory|ngstyle)\.js$/,
-        },
-        {
-          test: /\.js$/,
-          exclude: /(ngfactory|ngstyle)\.js$/,
-          enforce: 'pre',
-          ...sourceMapUseRule,
-        },
-      ],
-    },
-    plugins: extraPlugins,
-  };
-}
diff --git a/packages/webpack/src/utils/webpack/partials/styles.ts b/packages/webpack/src/utils/webpack/partials/styles.ts
deleted file mode 100644
index fd8978ebf608a0..00000000000000
--- a/packages/webpack/src/utils/webpack/partials/styles.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import * as path from 'path';
-import { RuleSetRule } from 'webpack';
-
-import { RemoveEmptyScriptsPlugin } from '../plugins/remove-empty-scripts-plugin';
-import { getOutputHashFormat } from '../../hash-format';
-import { PostcssCliResources } from '../plugins/postcss-cli-resources';
-import { RemoveHashPlugin } from '../plugins/remove-hash-plugin';
-import { NormalizedWebpackExecutorOptions } from '../../../executors/webpack/schema';
-import { normalizeExtraEntryPoints } from '../normalize-entry';
-import MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const autoprefixer = require('autoprefixer');
-const postcssImports = require('postcss-import');
-
-export function getStylesConfig(
-  root: string,
-  buildOptions: NormalizedWebpackExecutorOptions,
-  includePaths: string[]
-) {
-  const RawCssLoader = require.resolve(
-    path.join(__dirname, '../plugins/raw-css-loader.js')
-  );
-
-  const entryPoints: { [key: string]: string[] } = {};
-  const globalStylePaths: string[] = [];
-  const extraPlugins = [];
-
-  const cssSourceMap = !!buildOptions.sourceMap;
-
-  // Determine hashing format.
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
-
-  const postcssOptionsCreator = (sourceMap: boolean) => {
-    return (loader) => ({
-      map: sourceMap && {
-        inline: true,
-        annotation: false,
-      },
-      plugins: [
-        postcssImports({
-          addModulesDirectories: includePaths,
-          resolve: (url: string) => (url.startsWith('~') ? url.slice(1) : url),
-        }),
-        PostcssCliResources({
-          baseHref: buildOptions.baseHref,
-          deployUrl: buildOptions.deployUrl,
-          loader,
-          filename: `[name]${hashFormat.file}.[ext]`,
-        }),
-        autoprefixer(),
-      ],
-    });
-  };
-
-  let lessPathOptions: { paths?: string[] } = {};
-
-  if (includePaths.length > 0) {
-    lessPathOptions = {
-      paths: includePaths,
-    };
-  }
-
-  // Process global styles.
-  if (buildOptions.styles.length > 0) {
-    const chunkNames: string[] = [];
-
-    normalizeExtraEntryPoints(buildOptions.styles, 'styles').forEach(
-      (style) => {
-        const resolvedPath = path.resolve(root, style.input);
-        // Add style entry points.
-        if (entryPoints[style.bundleName]) {
-          entryPoints[style.bundleName].push(resolvedPath);
-        } else {
-          entryPoints[style.bundleName] = [resolvedPath];
-        }
-
-        // Add non injected styles to the list.
-        if (!style.inject) {
-          chunkNames.push(style.bundleName);
-        }
-
-        // Add global css paths.
-        globalStylePaths.push(resolvedPath);
-      }
-    );
-
-    if (chunkNames.length > 0) {
-      // Add plugin to remove hashes from lazy styles.
-      extraPlugins.push(new RemoveHashPlugin({ chunkNames, hashFormat }));
-    }
-  }
-
-  // set base rules to derive final rules from
-  const baseRules: RuleSetRule[] = [
-    { test: /\.css$/, use: [] },
-    {
-      test: /\.scss$|\.sass$/,
-      use: [
-        {
-          loader: require.resolve('sass-loader'),
-          options: {
-            implementation: require('sass'),
-            sourceMap: cssSourceMap,
-            sassOptions: {
-              fiber: false,
-              // bootstrap-sass requires a minimum precision of 8
-              precision: 8,
-              includePaths,
-            },
-          },
-        },
-      ],
-    },
-    {
-      test: /\.less$/,
-      use: [
-        {
-          loader: require.resolve('less-loader'),
-          options: {
-            sourceMap: cssSourceMap,
-            lessOptions: {
-              javascriptEnabled: true,
-              ...lessPathOptions,
-            },
-          },
-        },
-      ],
-    },
-    {
-      test: /\.styl$/,
-      use: [
-        {
-          loader: require.resolve('stylus-loader'),
-          options: {
-            sourceMap: cssSourceMap,
-            stylusOptions: {
-              include: includePaths,
-            },
-          },
-        },
-      ],
-    },
-  ];
-
-  // load component css as raw strings
-  const componentsSourceMap = !!(cssSourceMap &&
-  // Never use component css sourcemap when style optimizations are on.
-  // It will just increase bundle size without offering good debug experience.
-  typeof buildOptions.optimization === 'undefined'
-    ? true
-    : typeof buildOptions.optimization === 'boolean'
-    ? !buildOptions.optimization
-    : buildOptions.optimization?.styles &&
-      // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
-      // for component css.
-      buildOptions.sourceMap !== 'hidden');
-
-  const rules: RuleSetRule[] = baseRules.map(({ test, use }) => ({
-    exclude: globalStylePaths,
-    test,
-    use: [
-      { loader: require.resolve('raw-loader') },
-      { loader: RawCssLoader },
-      {
-        loader: require.resolve('postcss-loader'),
-        options: {
-          implementation: require('postcss'),
-          postcssOptions: postcssOptionsCreator(componentsSourceMap),
-        },
-      },
-      ...(Array.isArray(use) ? use : []),
-    ],
-  }));
-
-  // load global css as css files
-  if (globalStylePaths.length > 0) {
-    const globalSourceMap =
-      !!cssSourceMap && buildOptions.sourceMap !== 'hidden';
-
-    rules.push(
-      ...baseRules.map(({ test, use }) => {
-        return {
-          include: globalStylePaths,
-          test,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: { esModule: true },
-            },
-            { loader: RawCssLoader },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                implementation: require('postcss'),
-                postcssOptions: postcssOptionsCreator(globalSourceMap),
-              },
-            },
-            ...(use as any[]),
-          ],
-        };
-      })
-    );
-  }
-
-  extraPlugins.push(
-    // extract global css from js files into own css file
-    new MiniCssExtractPlugin({
-      filename: `[name]${hashFormat.extract}.css`,
-    }),
-    // suppress empty .js files in css only entry points
-    new RemoveEmptyScriptsPlugin()
-  );
-
-  return {
-    entry: entryPoints,
-    module: { rules },
-    plugins: extraPlugins,
-  };
-}
diff --git a/packages/webpack/src/utils/webpack/plugins/index-file/index-html-generator.ts b/packages/webpack/src/utils/webpack/plugins/index-file/index-html-generator.ts
index 4aa1da59ef6290..ffad62d96dc54b 100644
--- a/packages/webpack/src/utils/webpack/plugins/index-file/index-html-generator.ts
+++ b/packages/webpack/src/utils/webpack/plugins/index-file/index-html-generator.ts
@@ -21,7 +21,6 @@ export interface IndexHtmlGeneratorProcessOptions {
   baseHref?: string | undefined;
   outputPath: string;
   files: FileInfo[];
-  noModuleFiles: FileInfo[];
   moduleFiles: FileInfo[];
 }
 
@@ -111,14 +110,7 @@ function augmentIndexHtmlPlugin(
   } = generator.options;
 
   return async (html, options) => {
-    const {
-      lang,
-      baseHref,
-      outputPath = '',
-      noModuleFiles,
-      files,
-      moduleFiles,
-    } = options;
+    const { lang, baseHref, outputPath = '', files, moduleFiles } = options;
 
     return augmentIndexHtml({
       html,
@@ -130,7 +122,6 @@ function augmentIndexHtmlPlugin(
       entrypoints,
       loadOutputFile: (filePath) =>
         generator.readAsset(join(outputPath, filePath)),
-      noModuleFiles,
       moduleFiles,
       files,
     });
diff --git a/packages/webpack/src/utils/webpack/plugins/index-html-webpack-plugin.ts b/packages/webpack/src/utils/webpack/plugins/index-html-webpack-plugin.ts
index 713d0346fc0710..c77b4472d986d5 100644
--- a/packages/webpack/src/utils/webpack/plugins/index-html-webpack-plugin.ts
+++ b/packages/webpack/src/utils/webpack/plugins/index-html-webpack-plugin.ts
@@ -13,7 +13,6 @@ export interface IndexHtmlWebpackPluginOptions
       IndexHtmlGeneratorProcessOptions,
       'files' | 'noModuleFiles' | 'moduleFiles'
     > {
-  noModuleEntrypoints: string[];
   moduleEntrypoints: string[];
 }
 
@@ -59,7 +58,6 @@ export class IndexHtmlWebpackPlugin extends IndexHtmlGenerator {
     const callback = async (assets: Record<string, unknown>) => {
       // Get all files for selected entrypoints
       const files: FileInfo[] = [];
-      const noModuleFiles: FileInfo[] = [];
       const moduleFiles: FileInfo[] = [];
 
       try {
@@ -79,9 +77,7 @@ export class IndexHtmlWebpackPlugin extends IndexHtmlGenerator {
             continue;
           }
 
-          if (this.options.noModuleEntrypoints.includes(entryName)) {
-            noModuleFiles.push(...entryFiles);
-          } else if (this.options.moduleEntrypoints.includes(entryName)) {
+          if (this.options.moduleEntrypoints.includes(entryName)) {
             moduleFiles.push(...entryFiles);
           } else {
             files.push(...entryFiles);
@@ -90,7 +86,6 @@ export class IndexHtmlWebpackPlugin extends IndexHtmlGenerator {
 
         const { content, warnings, errors } = await this.process({
           files,
-          noModuleFiles,
           moduleFiles,
           outputPath: dirname(this.options.outputPath),
           baseHref: this.options.baseHref,
diff --git a/packages/webpack/src/utils/webpack/plugins/raw-css-loader.ts b/packages/webpack/src/utils/webpack/plugins/raw-css-loader.ts
deleted file mode 100644
index adc45e6b321871..00000000000000
--- a/packages/webpack/src/utils/webpack/plugins/raw-css-loader.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function RawCssLoader(content: string, map: object) {
-  const stringifiedContent = JSON.stringify(content);
-  const stringifiedMap = map ? JSON.stringify(map) : `''`;
-  return `module.exports = [[module.id, ${stringifiedContent}, '', ${stringifiedMap}]]`;
-}
diff --git a/packages/webpack/src/utils/webpack/safari-nomodule.js b/packages/webpack/src/utils/webpack/safari-nomodule.js
deleted file mode 100644
index 3ed244256f3a9c..00000000000000
--- a/packages/webpack/src/utils/webpack/safari-nomodule.js
+++ /dev/null
@@ -1,23 +0,0 @@
-(function () {
-  var check = document.createElement('script');
-  if (!('noModule' in check) && 'onbeforeload' in check) {
-    var support = false;
-    document.addEventListener(
-      'beforeload',
-      function (e) {
-        if (e.target === check) {
-          support = true;
-        } else if (!e.target.hasAttribute('nomodule') || !support) {
-          return;
-        }
-        e.preventDefault();
-      },
-      true
-    );
-
-    check.type = 'module';
-    check.src = '.';
-    document.head.appendChild(check);
-    check.remove();
-  }
-})();
diff --git a/packages/webpack/src/utils/webpack/write-index-html.ts b/packages/webpack/src/utils/webpack/write-index-html.ts
index 3c86b8c2e28689..5f490381aabde3 100644
--- a/packages/webpack/src/utils/webpack/write-index-html.ts
+++ b/packages/webpack/src/utils/webpack/write-index-html.ts
@@ -59,13 +59,7 @@ export interface FileInfo {
  * bundles for differential serving.
  */
 export function augmentIndexHtml(params: AugmentIndexHtmlOptions): string {
-  const {
-    loadOutputFile,
-    files,
-    noModuleFiles = [],
-    moduleFiles = [],
-    entrypoints,
-  } = params;
+  const { loadOutputFile, files, moduleFiles = [], entrypoints } = params;
 
   let { crossOrigin = 'none' } = params;
   if (params.sri && crossOrigin === 'none') {
@@ -76,7 +70,7 @@ export function augmentIndexHtml(params: AugmentIndexHtmlOptions): string {
   const scripts = new Set<string>();
 
   // Sort files in the order we want to insert them by entrypoint and dedupes duplicates
-  const mergedFiles = [...moduleFiles, ...noModuleFiles, ...files];
+  const mergedFiles = [...moduleFiles, ...files];
   for (const entrypoint of entrypoints) {
     for (const { extension, file, name } of mergedFiles) {
       if (name !== entrypoint) {
@@ -160,15 +154,9 @@ export function augmentIndexHtml(params: AugmentIndexHtmlOptions): string {
       // in some cases for differential loading file with the same name is avialable in both
       // nomodule and module such as scripts.js
       // we shall not add these attributes if that's the case
-      const isNoModuleType = noModuleFiles.some(scriptPredictor);
       const isModuleType = moduleFiles.some(scriptPredictor);
 
-      if (isNoModuleType && !isModuleType) {
-        attrs.push({ name: 'nomodule', value: null });
-        if (!script.startsWith('polyfills-nomodule-es5')) {
-          attrs.push({ name: 'defer', value: null });
-        }
-      } else if (isModuleType) {
+      if (isModuleType) {
         attrs.push({ name: 'type', value: 'module' });
       } else {
         attrs.push({ name: 'defer', value: null });
@@ -293,7 +281,6 @@ export async function writeIndexHtml({
   outputPath,
   indexPath,
   files = [],
-  noModuleFiles = [],
   moduleFiles = [],
   baseHref,
   deployUrl,
@@ -314,7 +301,6 @@ export async function writeIndexHtml({
     sri,
     entrypoints: generateEntryPoints({ scripts, styles }),
     files: filterAndMapBuildFiles(files, ['.js', '.css']),
-    noModuleFiles: filterAndMapBuildFiles(noModuleFiles, '.js'),
     moduleFiles: filterAndMapBuildFiles(moduleFiles, '.js'),
     loadOutputFile: (filePath) =>
       readFileSync(join(dirname(outputPath), filePath)).toString(),
diff --git a/packages/webpack/src/utils/with-nx.ts b/packages/webpack/src/utils/with-nx.ts
new file mode 100644
index 00000000000000..1765d883faef00
--- /dev/null
+++ b/packages/webpack/src/utils/with-nx.ts
@@ -0,0 +1,352 @@
+import * as path from 'path';
+import { Configuration, WebpackPluginInstance, ProgressPlugin } from 'webpack';
+import { ExecutorContext } from 'nx/src/config/misc-interfaces';
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript';
+import { LicenseWebpackPlugin } from 'license-webpack-plugin';
+import TerserPlugin = require('terser-webpack-plugin');
+import nodeExternals = require('webpack-node-externals');
+import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+import { NormalizedWebpackExecutorOptions } from '../executors/webpack/schema';
+import { StatsJsonPlugin } from '../plugins/stats-json-plugin';
+import { createCopyPlugin } from './create-copy-plugin';
+import { GeneratePackageJsonWebpackPlugin } from '../plugins/generate-package-json-webpack-plugin';
+import { getOutputHashFormat } from './hash-format';
+
+const IGNORED_WEBPACK_WARNINGS = [
+  /The comment file/i,
+  /could not find any license/i,
+];
+
+const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
+const mainFields = ['main', 'module'];
+
+export function withNx() {
+  return function configure(
+    config: Configuration,
+    {
+      options,
+      context,
+    }: {
+      options: NormalizedWebpackExecutorOptions;
+      context: ExecutorContext;
+    }
+  ): Configuration {
+    const plugins: WebpackPluginInstance[] = [
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          configFile: options.tsConfig,
+          memoryLimit: options.memoryLimit || 2018,
+        },
+      }),
+    ];
+    const entry = {};
+
+    if (options.main) {
+      const mainEntry = options.outputFileName
+        ? path.parse(options.outputFileName).name
+        : 'main';
+      entry[mainEntry] = [options.main];
+    }
+
+    if (options.additionalEntryPoints) {
+      for (const entry of options.additionalEntryPoints) {
+        entry[entry.entryName] = entry.entryPath;
+      }
+    }
+
+    if (options.polyfills) {
+      entry['polyfills'] = [
+        ...(entry['polyfills'] || []),
+        path.resolve(options.root, options.polyfills),
+      ];
+    }
+
+    if (options.progress) {
+      plugins.push(new ProgressPlugin({ profile: options.verbose }));
+    }
+
+    if (options.extractLicenses) {
+      plugins.push(
+        new LicenseWebpackPlugin({
+          stats: {
+            warnings: false,
+            errors: false,
+          },
+          perChunkOutput: false,
+          outputFilename: `3rdpartylicenses.txt`,
+        }) as unknown as WebpackPluginInstance
+      );
+    }
+
+    if (Array.isArray(options.assets) && options.assets.length > 0) {
+      plugins.push(createCopyPlugin(options.assets));
+    }
+
+    if (options.generatePackageJson && context) {
+      plugins.push(new GeneratePackageJsonWebpackPlugin(context, options));
+    }
+
+    if (options.statsJson) {
+      plugins.push(new StatsJsonPlugin());
+    }
+
+    let externals = [];
+    if (options.target === 'node' && options.externalDependencies === 'all') {
+      const modulesDir = `${options.root}/node_modules`;
+      externals.push(nodeExternals({ modulesDir }));
+    } else if (Array.isArray(options.externalDependencies)) {
+      externals.push(function (ctx, callback: Function) {
+        if (options.externalDependencies.includes(ctx.request)) {
+          // not bundled
+          return callback(null, `commonjs ${ctx.request}`);
+        }
+        // bundled
+        callback();
+      });
+    }
+
+    const hashFormat = getOutputHashFormat(options.outputHashing as string);
+    const filename = options.outputHashing
+      ? `[name]${hashFormat.script}.js`
+      : '[name].js';
+    const chunkFilename = options.outputHashing
+      ? `[name]${hashFormat.chunk}.js`
+      : '[name].js';
+
+    return {
+      ...config,
+      target: options.target,
+      node: false as const,
+      // When mode is development or production, webpack will automatically
+      // configure DefinePlugin to replace `process.env.NODE_ENV` with the
+      // build-time value. Thus, we need to make sure it's the same value to
+      // avoid conflicts.
+      //
+      // When the NODE_ENV is something else (e.g. test), then set it to none
+      // to prevent extra behavior from webpack.
+      mode:
+        process.env.NODE_ENV === 'development' ||
+        process.env.NODE_ENV === 'production'
+          ? process.env.NODE_ENV
+          : 'none',
+      devtool:
+        options.sourceMap === 'hidden'
+          ? 'hidden-source-map'
+          : options.sourceMap
+          ? 'source-map'
+          : false,
+      entry,
+      output: {
+        ...config.output,
+        libraryTarget: options.target === 'node' ? 'commonjs' : undefined,
+        path: options.outputPath,
+        filename,
+        chunkFilename,
+        hashFunction: 'xxhash64',
+        // Disabled for performance
+        pathinfo: false,
+        scriptType: 'module',
+      },
+      watch: options.watch,
+      watchOptions: {
+        poll: options.poll,
+      },
+      profile: options.statsJson,
+      resolve: {
+        ...config.resolve,
+        extensions,
+        alias: options.fileReplacements.reduce(
+          (aliases, replacement) => ({
+            ...aliases,
+            [replacement.replace]: replacement.with,
+          }),
+          {}
+        ),
+        plugins: [
+          new TsconfigPathsPlugin({
+            configFile: options.tsConfig,
+            extensions,
+            mainFields,
+          }),
+        ],
+        mainFields,
+      },
+      externals,
+      optimization: {
+        ...config.optimization,
+        sideEffects: true,
+        minimize: !!options.optimization,
+        minimizer: [
+          options.compiler !== 'swc'
+            ? new TerserPlugin({
+                parallel: true,
+                terserOptions: {
+                  ecma: 2020,
+                  safari10: true,
+                  output: {
+                    ascii_only: true,
+                    comments: false,
+                    webkit: true,
+                  },
+                },
+              })
+            : new TerserPlugin({
+                minify: TerserPlugin.swcMinify,
+                // `terserOptions` options will be passed to `swc`
+                terserOptions: {
+                  mangle: false,
+                  keep_classnames: true,
+                },
+              }),
+        ],
+        runtimeChunk: false,
+        concatenateModules: true,
+      },
+      performance: {
+        ...config.performance,
+        hints: false,
+      },
+      experiments: { ...config.experiments, cacheUnaffected: true },
+      ignoreWarnings: [
+        (x) =>
+          IGNORED_WEBPACK_WARNINGS.some((r) =>
+            typeof x === 'string' ? r.test(x) : r.test(x.message)
+          ),
+      ],
+      module: {
+        ...config.module,
+        // Enabled for performance
+        unsafeCache: true,
+        rules: [
+          // options.sourceMap && {
+          //   test: /\.js$/,
+          //   enforce: 'pre' as const,
+          //   loader: require.resolve('source-map-loader'),
+          // },
+          // options.target === 'web' && {
+          //   test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
+          //   type: 'asset',
+          //   parser: {
+          //     dataUrlCondition: {
+          //       maxSize: 10_000, // 10 kB
+          //     },
+          //   },
+          // },
+          {
+            // There's an issue resolving paths without fully specified extensions
+            // See: https://github.com/graphql/graphql-js/issues/2721
+            // TODO(jack): Add a flag to turn this option on like Next.js does via experimental flag.
+            // See: https://github.com/vercel/next.js/pull/29880
+            test: /\.m?jsx?$/,
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+          // There's an issue when using buildable libs and .js files (instead of .ts files),
+          // where the wrong type is used (commonjs vs esm) resulting in export-imports throwing errors.
+          // See: https://github.com/nrwl/nx/issues/10990
+          {
+            test: /\.js$/,
+            type: 'javascript/auto',
+          },
+          createLoaderFromCompiler(options),
+        ].filter((r) => !!r),
+      },
+      plugins: (config.plugins ?? []).concat(plugins),
+      stats: {
+        hash: true,
+        timings: false,
+        cached: false,
+        cachedAssets: false,
+        modules: false,
+        warnings: true,
+        errors: true,
+        colors: !options.verbose && !options.statsJson,
+        chunks: !options.verbose,
+        assets: !!options.verbose,
+        chunkOrigins: !!options.verbose,
+        chunkModules: !!options.verbose,
+        children: !!options.verbose,
+        reasons: !!options.verbose,
+        version: !!options.verbose,
+        errorDetails: !!options.verbose,
+        moduleTrace: !!options.verbose,
+        usedExports: !!options.verbose,
+      },
+    };
+  };
+}
+
+export function createLoaderFromCompiler(
+  options: NormalizedWebpackExecutorOptions
+) {
+  switch (options.compiler) {
+    case 'swc':
+      return {
+        test: /\.([jt])sx?$/,
+        loader: require.resolve('swc-loader'),
+        exclude: /node_modules/,
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              decorators: true,
+              tsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+            },
+            loose: true,
+          },
+        },
+      };
+    case 'tsc':
+      const { loadTsTransformers } = require('@nrwl/js');
+      const { compilerPluginHooks, hasPlugin } = loadTsTransformers(
+        options.transformers
+      );
+      return {
+        test: /\.([jt])sx?$/,
+        loader: require.resolve(`ts-loader`),
+        exclude: /node_modules/,
+        options: {
+          configFile: options.tsConfig,
+          transpileOnly: !hasPlugin,
+          // https://github.com/TypeStrong/ts-loader/pull/685
+          experimentalWatchApi: true,
+          getCustomTransformers: (program) => ({
+            before: compilerPluginHooks.beforeHooks.map((hook) =>
+              hook(program)
+            ),
+            after: compilerPluginHooks.afterHooks.map((hook) => hook(program)),
+            afterDeclarations: compilerPluginHooks.afterDeclarationsHooks.map(
+              (hook) => hook(program)
+            ),
+          }),
+        },
+      };
+    case 'babel':
+      const tsConfig = readTsConfig(options.tsConfig);
+      return {
+        test: /\.([jt])sx?$/,
+        loader: path.join(__dirname, './web-babel-loader'),
+        exclude: /node_modules/,
+        options: {
+          rootMode: 'upward',
+          cwd: path.join(options.root, options.sourceRoot),
+          emitDecoratorMetadata: tsConfig.options.emitDecoratorMetadata,
+          isModern: true,
+          envName: process.env.NODE_ENV,
+          babelrc: true,
+          cacheDirectory: true,
+          cacheCompression: false,
+        },
+      };
+    default:
+      return null;
+  }
+}
diff --git a/packages/webpack/src/utils/with-web.ts b/packages/webpack/src/utils/with-web.ts
new file mode 100644
index 00000000000000..d36dcd0723cb99
--- /dev/null
+++ b/packages/webpack/src/utils/with-web.ts
@@ -0,0 +1,472 @@
+import * as webpack from 'webpack';
+import {
+  Configuration,
+  ids,
+  RuleSetRule,
+  WebpackPluginInstance,
+} from 'webpack';
+import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
+import * as path from 'path';
+import { getOutputHashFormat } from '@nrwl/webpack/src/utils/hash-format';
+import { PostcssCliResources } from '@nrwl/webpack/src/utils/webpack/plugins/postcss-cli-resources';
+import { normalizeExtraEntryPoints } from '@nrwl/webpack/src/utils/webpack/normalize-entry';
+import { RemoveEmptyScriptsPlugin } from '@nrwl/webpack/src/utils/webpack/plugins/remove-empty-scripts-plugin';
+
+import { NormalizedWebpackExecutorOptions } from '../executors/webpack/schema';
+import { getClientEnvironment } from './get-client-environment';
+import { RemoveHashPlugin } from './webpack/plugins/remove-hash-plugin';
+import { ScriptsWebpackPlugin } from './webpack/plugins/scripts-webpack-plugin';
+import { getCSSModuleLocalIdent } from './get-css-module-local-ident';
+import CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+import MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import autoprefixer = require('autoprefixer');
+import postcssImports = require('postcss-import');
+
+interface PostcssOptions {
+  (loader: any): any;
+
+  config?: string;
+}
+
+export function withWeb() {
+  return function configure(
+    config: Configuration,
+    { options }: { options: NormalizedWebpackExecutorOptions }
+  ): Configuration {
+    const plugins = [];
+
+    const stylesOptimization =
+      typeof options.optimization === 'object'
+        ? options.optimization.styles
+        : options.optimization;
+
+    if (Array.isArray(options.scripts)) {
+      plugins.push(...createScriptsPlugin(options));
+    }
+
+    if (options.subresourceIntegrity) {
+      plugins.push(new SubresourceIntegrityPlugin());
+    }
+
+    const minimizer: WebpackPluginInstance[] = [
+      new ids.HashedModuleIdsPlugin(),
+    ];
+    if (stylesOptimization) {
+      minimizer.push(
+        new CssMinimizerPlugin({
+          test: /\.(?:css|scss|sass|less|styl)$/,
+        })
+      );
+    }
+    plugins.push(
+      new webpack.DefinePlugin(
+        getClientEnvironment(process.env.NODE_ENV).stringified
+      )
+    );
+
+    const entry: { [key: string]: string[] } = {};
+    const globalStylePaths: string[] = [];
+
+    // Determine hashing format.
+    const hashFormat = getOutputHashFormat(options.outputHashing as string);
+
+    const includePaths: string[] = [];
+    if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
+      options.stylePreprocessorOptions.includePaths.forEach(
+        (includePath: string) =>
+          includePaths.push(path.resolve(options.root, includePath))
+      );
+    }
+
+    let lessPathOptions: { paths?: string[] } = {};
+
+    if (includePaths.length > 0) {
+      lessPathOptions = {
+        paths: includePaths,
+      };
+    }
+
+    // Process global styles.
+    if (options.styles.length > 0) {
+      const chunkNames: string[] = [];
+      normalizeExtraEntryPoints(options.styles, 'styles').forEach((style) => {
+        const resolvedPath = path.resolve(options.root, style.input);
+        // Add style entry points.
+        if (entry[style.bundleName]) {
+          entry[style.bundleName].push(resolvedPath);
+        } else {
+          entry[style.bundleName] = [resolvedPath];
+        }
+
+        // Add global css paths.
+        globalStylePaths.push(resolvedPath);
+      });
+
+      if (chunkNames.length > 0) {
+        // Add plugin to remove hashes from lazy styles.
+        plugins.push(new RemoveHashPlugin({ chunkNames, hashFormat }));
+      }
+    }
+
+    const cssModuleRules: RuleSetRule[] = [
+      {
+        test: /\.module\.css$/,
+        use: getCommonLoadersForCssModules(options, includePaths),
+      },
+      {
+        test: /\.module\.(scss|sass)$/,
+        use: [
+          ...getCommonLoadersForCssModules(options, includePaths),
+          {
+            loader: require.resolve('sass-loader'),
+            options: {
+              implementation: require('sass'),
+              sassOptions: {
+                fiber: false,
+                precision: 8,
+                includePaths,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.module\.less$/,
+        use: [
+          ...getCommonLoadersForCssModules(options, includePaths),
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              lessOptions: {
+                paths: includePaths,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.module\.styl$/,
+        use: [
+          ...getCommonLoadersForCssModules(options, includePaths),
+          {
+            loader: require.resolve('stylus-loader'),
+            options: {
+              stylusOptions: {
+                include: includePaths,
+              },
+            },
+          },
+        ],
+      },
+    ];
+
+    const globalCssRules: RuleSetRule[] = [
+      {
+        test: /\.css$/,
+        use: getCommonLoadersForGlobalCss(options, includePaths),
+      },
+      {
+        test: /\.scss$|\.sass$/,
+        use: [
+          ...getCommonLoadersForGlobalCss(options, includePaths),
+          {
+            loader: require.resolve('sass-loader'),
+            options: {
+              implementation: require('sass'),
+              sourceMap: options.sourceMap,
+              sassOptions: {
+                fiber: false,
+                // bootstrap-sass requires a minimum precision of 8
+                precision: 8,
+                includePaths,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          ...getCommonLoadersForGlobalCss(options, includePaths),
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              sourceMap: options.sourceMap,
+              lessOptions: {
+                javascriptEnabled: true,
+                ...lessPathOptions,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.styl$/,
+        use: [
+          ...getCommonLoadersForGlobalCss(options, includePaths),
+          {
+            loader: require.resolve('stylus-loader'),
+            options: {
+              sourceMap: options.sourceMap,
+              stylusOptions: {
+                include: includePaths,
+              },
+            },
+          },
+        ],
+      },
+    ];
+
+    const rules: RuleSetRule[] = [
+      // load global css as css files
+      {
+        test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
+        include: globalStylePaths,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: { esModule: true },
+          },
+          { loader: require.resolve('css-loader') },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              implementation: require('postcss'),
+              postcssOptions: postcssOptionsCreator(options, includePaths),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
+        exclude: globalStylePaths,
+        oneOf: [...cssModuleRules, ...globalCssRules],
+      },
+    ];
+
+    plugins.push(
+      // extract global css from js files into own css file
+      new MiniCssExtractPlugin({
+        filename: `[name]${hashFormat.extract}.css`,
+      }),
+      // suppress empty .js files in css only entry points
+      new RemoveEmptyScriptsPlugin()
+    );
+
+    // context needs to be set for babel to pick up correct babelrc
+    config.context = path.join(options.root, options.sourceRoot);
+
+    config.output = {
+      ...config.output,
+      crossOriginLoading: options.subresourceIntegrity
+        ? ('anonymous' as const)
+        : (false as const),
+    };
+
+    // In case users customize their webpack config with unsupported entry.
+    if (typeof config.entry === 'function')
+      throw new Error('Entry function is not supported. Use an object.');
+    if (typeof config.entry === 'string')
+      throw new Error('Entry string is not supported. Use an object.');
+    if (Array.isArray(config.entry))
+      throw new Error('Entry array is not supported. Use an object.');
+
+    config.entry = { ...config.entry, ...entry };
+
+    config.optimization = {
+      ...config.optimization,
+      minimizer,
+      emitOnErrors: false,
+      moduleIds: 'deterministic' as const,
+      runtimeChunk: options.runtimeChunk ? ('single' as const) : false,
+      splitChunks: {
+        maxAsyncRequests: Infinity,
+        cacheGroups: {
+          default: !!options.commonChunk && {
+            chunks: 'async' as const,
+            minChunks: 2,
+            priority: 10,
+          },
+          common: !!options.commonChunk && {
+            name: 'common',
+            chunks: 'async' as const,
+            minChunks: 2,
+            enforce: true,
+            priority: 5,
+          },
+          vendors: false as const,
+          vendor: !!options.vendorChunk && {
+            name: 'vendor',
+            chunks: (chunk) => chunk.name === 'main',
+            enforce: true,
+            test: /[\\/]node_modules[\\/]/,
+          },
+        },
+      },
+    };
+
+    config.plugins.push(...plugins);
+
+    config.module = {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        ...rules,
+        {
+          test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
+          loader: require.resolve('file-loader'),
+          options: {
+            name: `[name]${hashFormat.file}.[ext]`,
+          },
+        },
+      ],
+    };
+    return config;
+  };
+}
+
+function createScriptsPlugin(
+  options: NormalizedWebpackExecutorOptions
+): WebpackPluginInstance[] {
+  // process global scripts
+  const globalScriptsByBundleName = normalizeExtraEntryPoints(
+    options.scripts || [],
+    'scripts'
+  ).reduce((prev: { bundleName: string; paths: string[] }[], curr) => {
+    const bundleName = curr.bundleName;
+    const resolvedPath = path.resolve(options.root, curr.input);
+    const existingEntry = prev.find((el) => el.bundleName === bundleName);
+    if (existingEntry) {
+      existingEntry.paths.push(resolvedPath);
+    } else {
+      prev.push({
+        bundleName,
+        paths: [resolvedPath],
+      });
+    }
+
+    return prev;
+  }, []);
+
+  const hashFormat = getOutputHashFormat(options.outputHashing as string);
+  const plugins = [];
+  // Add a new asset for each entry.
+  globalScriptsByBundleName.forEach((script) => {
+    const bundleName = script.bundleName;
+
+    plugins.push(
+      new ScriptsWebpackPlugin({
+        name: bundleName,
+        sourceMap: !!options.sourceMap,
+        filename: `${path.basename(bundleName)}.${hashFormat.script}.js`,
+        scripts: script.paths,
+        basePath: options.sourceRoot,
+      })
+    );
+  });
+
+  return plugins;
+}
+
+function getCommonLoadersForCssModules(
+  options: NormalizedWebpackExecutorOptions,
+  includePaths: string[]
+) {
+  // PostCSS options depend on the webpack loader, but we need to set the `config` path as a string due to this check:
+  // https://github.com/webpack-contrib/postcss-loader/blob/0d342b1/src/utils.js#L36
+
+  const postcssOptions: PostcssOptions = () => ({
+    plugins: [
+      postcssImports({
+        addModulesDirectories: includePaths,
+        resolve: (url: string) => (url.startsWith('~') ? url.slice(1) : url),
+      }),
+    ],
+  });
+  // If a path to postcssConfig is passed in, set it for app and all libs, otherwise
+  // use automatic detection.
+  if (typeof options.postcssConfig === 'string') {
+    postcssOptions.config = path.join(options.root, options.postcssConfig);
+  }
+
+  // load component css as raw strings
+  return [
+    {
+      loader: options.extractCss
+        ? MiniCssExtractPlugin.loader
+        : require.resolve('style-loader'),
+    },
+    {
+      loader: require.resolve('css-loader'),
+      options: {
+        modules: {
+          mode: 'local',
+          getLocalIdent: getCSSModuleLocalIdent,
+        },
+        importLoaders: 1,
+      },
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        implementation: require('postcss'),
+        postcssOptions: postcssOptions,
+      },
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        implementation: require('postcss'),
+        postcssOptions: postcssOptionsCreator(options, includePaths),
+      },
+    },
+  ];
+}
+
+function getCommonLoadersForGlobalCss(
+  options: NormalizedWebpackExecutorOptions,
+  includePaths: string[]
+) {
+  return [
+    {
+      loader: options.extractCss
+        ? MiniCssExtractPlugin.loader
+        : require.resolve('style-loader'),
+    },
+    { loader: require.resolve('css-loader') },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        implementation: require('postcss'),
+        postcssOptions: postcssOptionsCreator(options, includePaths),
+      },
+    },
+  ];
+}
+
+function postcssOptionsCreator(
+  options: NormalizedWebpackExecutorOptions,
+  includePaths: string[]
+) {
+  const hashFormat = getOutputHashFormat(options.outputHashing as string);
+  return (loader) => ({
+    map: options.sourceMap &&
+      options.sourceMap !== 'hidden' && {
+        inline: true,
+        annotation: false,
+      },
+    plugins: [
+      postcssImports({
+        addModulesDirectories: includePaths,
+        resolve: (url: string) => (url.startsWith('~') ? url.slice(1) : url),
+      }),
+      PostcssCliResources({
+        baseHref: options.baseHref,
+        deployUrl: options.deployUrl,
+        loader,
+        filename: `[name]${hashFormat.file}.[ext]`,
+      }),
+      autoprefixer(),
+    ],
+  });
+}