diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts b/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts
index c7737d04efd0..7891bac64eb3 100644
--- a/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts
+++ b/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts
@@ -143,7 +143,7 @@ async function _getServerModuleBundlePath(
     throw new Error(`Could not find server output directory: ${outputPath}.`);
   }
 
-  const re = /^main\.(?:[a-zA-Z0-9]{20}\.)?js$/;
+  const re = /^main\.(?:[a-zA-Z0-9]{16}\.)?js$/;
   const maybeMain = fs.readdirSync(outputPath).find((x) => re.test(x));
 
   if (!maybeMain) {
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/source-map_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/source-map_spec.ts
index 86cec3b9842b..62349bb149be 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/specs/source-map_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/source-map_spec.ts
@@ -58,7 +58,7 @@ describe('Browser Builder source map', () => {
       outputHashing: OutputHashing.All,
     });
 
-    expect(Object.keys(files).some((name) => /main\.[0-9a-f]{20}\.js.map/.test(name))).toBeTruthy();
+    expect(Object.keys(files).some((name) => /main\.[0-9a-f]{16}\.js.map/.test(name))).toBeTruthy();
   });
 
   it('does not output source map when disabled', async () => {
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts
index 2676fdc08ce4..8dd061cbcdda 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts
@@ -120,7 +120,7 @@ describe('Browser Builder Web Worker support', () => {
     // Worker bundle should have hash and minified code.
     const workerBundle = host.fileMatchExists(
       outputPath,
-      /src_app_app_worker_ts\.[0-9a-f]{20}\.js/,
+      /src_app_app_worker_ts\.[0-9a-f]{16}\.js/,
     ) as string;
     expect(workerBundle).toBeTruthy('workerBundle should exist');
     const workerContent = virtualFs.fileBufferToString(
@@ -131,7 +131,7 @@ describe('Browser Builder Web Worker support', () => {
     expect(workerContent).toContain('"hello"===e&&postMessage');
 
     // Main bundle should reference hashed worker bundle.
-    const mainBundle = host.fileMatchExists(outputPath, /main\.[0-9a-f]{20}\.js/) as string;
+    const mainBundle = host.fileMatchExists(outputPath, /main\.[0-9a-f]{16}\.js/) as string;
     expect(mainBundle).toBeTruthy('mainBundle should exist');
     const mainContent = virtualFs.fileBufferToString(
       host.scopedSync().read(join(outputPath, mainBundle)),
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/output-hashing_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/output-hashing_spec.ts
index 2be061f3f951..66e8f66d9827 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/output-hashing_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/output-hashing_spec.ts
@@ -31,10 +31,10 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.css$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.css$/)).toBeTrue();
       expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{20}\.png$/)).toBeTrue();
     });
 
@@ -50,11 +50,11 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.css$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{20}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.css$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{16}\.png$/)).toBeFalse();
     });
 
     it(`doesn't hash any filenames when set to "none"`, async () => {
@@ -70,11 +70,11 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.css$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{20}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.css$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{16}\.png$/)).toBeFalse();
     });
 
     it(`hashes CSS resources filenames only when set to "media"`, async () => {
@@ -90,10 +90,10 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.css$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.css$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{20}\.png$/)).toBeTrue();
     });
 
@@ -110,11 +110,11 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{20}\.js$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.css$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{20}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /runtime\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /main\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /polyfills\.[0-9a-f]{16}\.js$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.css$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist', /spectrum\.[0-9a-f]{16}\.png$/)).toBeFalse();
     });
 
     it('does not hash non injected styles', async () => {
@@ -133,8 +133,8 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.js$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{20}\.js.map$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.js$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist', /styles\.[0-9a-f]{16}\.js.map$/)).toBeFalse();
       harness.expectFile('dist/styles.css').toExist();
       harness.expectFile('dist/styles.css.map').toExist();
     });
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
index ba9d0e64a4fe..ac1ad128c26c 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -342,6 +342,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     context: root,
     entry: entryPoints,
     output: {
+      hashFunction: 'xxhash64', // todo: remove in webpack 6. This is part of `futureDefaults`.
       clean: buildOptions.deleteOutputPath ?? true,
       path: path.resolve(root, buildOptions.outputPath),
       publicPath: buildOptions.deployUrl ?? '',
diff --git a/tests/legacy-cli/e2e/tests/basic/build.ts b/tests/legacy-cli/e2e/tests/basic/build.ts
index 24d0ebf486d9..a6277d0e377c 100644
--- a/tests/legacy-cli/e2e/tests/basic/build.ts
+++ b/tests/legacy-cli/e2e/tests/basic/build.ts
@@ -13,7 +13,7 @@ export default async function () {
 
   // Production build
   const { stderr: stderrProgress, stdout } = await ng('build', '--progress');
-  await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{20}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{16}\.js/);
 
   if (!stdout.includes('Initial Total')) {
     throw new Error(`Expected stdout to contain 'Initial Total' but it did not.\n${stdout}`);
diff --git a/tests/legacy-cli/e2e/tests/build/output-hashing.ts b/tests/legacy-cli/e2e/tests/build/output-hashing.ts
index 7afa86d646b5..f88a4d104b2a 100644
--- a/tests/legacy-cli/e2e/tests/build/output-hashing.ts
+++ b/tests/legacy-cli/e2e/tests/build/output-hashing.ts
@@ -2,7 +2,6 @@ import { copyProjectAsset } from '../../utils/assets';
 import { expectFileMatchToExist, expectFileToMatch, writeMultipleFiles } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
-
 async function verifyMedia(fileNameRe: RegExp, content: RegExp) {
   const fileName = await expectFileMatchToExist('dist/test-project/', fileNameRe);
   await expectFileToMatch(`dist/test-project/${fileName}`, content);
@@ -15,10 +14,10 @@ export default async function () {
   // use image with file size >10KB to prevent inlining
   await copyProjectAsset('images/spectrum.png', './src/assets/image.png');
   await ng('build', '--output-hashing=all', '--configuration=development');
-  await expectFileToMatch('dist/test-project/index.html', /runtime\.[0-9a-f]{20}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{20}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{20}\.(css|js)/);
-  await verifyMedia(/styles\.[0-9a-f]{20}\.(css|js)/, /image\.[0-9a-f]{20}\.png/);
+  await expectFileToMatch('dist/test-project/index.html', /runtime\.[0-9a-f]{16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{16}\.(css|js)/);
+  await verifyMedia(/styles\.[0-9a-f]{16}\.(css|js)/, /image\.[0-9a-f]{20}\.png/);
 
   await ng('build', '--output-hashing=none', '--configuration=development');
   await expectFileToMatch('dist/test-project/index.html', /runtime\.js/);
@@ -33,8 +32,8 @@ export default async function () {
   await verifyMedia(/styles\.(css|js)/, /image\.[0-9a-f]{20}\.png/);
 
   await ng('build', '--output-hashing=bundles', '--configuration=development');
-  await expectFileToMatch('dist/test-project/index.html', /runtime\.[0-9a-f]{20}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{20}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{20}\.(css|js)/);
-  await verifyMedia(/styles\.[0-9a-f]{20}\.(css|js)/, /image\.png/);
+  await expectFileToMatch('dist/test-project/index.html', /runtime\.[0-9a-f]{16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{16}\.(css|js)/);
+  await verifyMedia(/styles\.[0-9a-f]{16}\.(css|js)/, /image\.png/);
 }
diff --git a/tests/legacy-cli/e2e/tests/build/prod-build.ts b/tests/legacy-cli/e2e/tests/build/prod-build.ts
index d109293815b9..38850965eace 100644
--- a/tests/legacy-cli/e2e/tests/build/prod-build.ts
+++ b/tests/legacy-cli/e2e/tests/build/prod-build.ts
@@ -32,8 +32,8 @@ export default async function () {
   await ng('build');
   await expectFileToExist(join(process.cwd(), 'dist'));
   // Check for cache busting hash script src
-  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{20}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{20}\.css/);
+  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{16}\.css/);
   await expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/);
 
   const indexContent = await readFile('dist/test-project/index.html');
diff --git a/tests/legacy-cli/e2e/tests/update/update-9.ts b/tests/legacy-cli/e2e/tests/update/update-9.ts
index fe3941da2431..69623ea76f49 100644
--- a/tests/legacy-cli/e2e/tests/update/update-9.ts
+++ b/tests/legacy-cli/e2e/tests/update/update-9.ts
@@ -50,5 +50,5 @@ export default async function () {
 
   // Verify project now creates bundles
   await noSilentNg('build', '--prod');
-  await expectFileMatchToExist('dist/nine-project/', /main\.[0-9a-f]{20}\.js/);
+  await expectFileMatchToExist('dist/nine-project/', /main\.[0-9a-f]{16}\.js/);
 }