From 13c3d9b87015e29a9e3b1e0e487acdcaaf6311a8 Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Thu, 7 Jul 2022 20:10:28 -0500
Subject: [PATCH] feat: webpack v5 (#1645)

* feat: webpack-v5

* test: Update tests

* docs: Updating docs to reflect changes

* chore: Removing optimize-plugin local patch
---
 .changeset/sweet-snakes-cheat.md              |  12 ++
 .eslintignore                                 |   1 +
 README.md                                     |  14 +-
 packages/cli/babel/index.js                   |  52 --------
 packages/cli/package.json                     |  73 +++++------
 packages/cli/src/index.js                     |   2 -
 packages/cli/src/lib/babel-config.js          |  25 ++--
 packages/cli/src/lib/entry.js                 |   6 +-
 packages/cli/src/lib/webpack/proxy-loader.js  |   4 +-
 packages/cli/src/lib/webpack/push-manifest.js |  49 ++++---
 .../cli/src/lib/webpack/render-html-plugin.js |  35 +++--
 packages/cli/src/lib/webpack/run-webpack.js   |  17 +--
 .../cli/src/lib/webpack/transform-config.js   |   1 +
 .../src/lib/webpack/webpack-base-config.js    | 102 ++++-----------
 .../src/lib/webpack/webpack-client-config.js  | 112 ++++------------
 packages/cli/src/resources/body-end.ejs       |  20 ++-
 packages/cli/src/resources/head-end.ejs       |   2 +-
 packages/cli/tests/build.test.js              |  99 ++++++--------
 packages/cli/tests/client.test.js             |  40 +++---
 packages/cli/tests/config-formats.test.js     |   6 +-
 packages/cli/tests/images/build.js            | 122 ++++++------------
 packages/cli/tests/lib/cli.js                 |  21 +--
 packages/cli/tests/lib/utils.js               |  38 ++++++
 packages/cli/tests/service-worker.test.js     |   7 +-
 .../tests/subjects/custom-babelrc/.babelrc    |   2 +-
 .../subjects/custom-webpack/preact.config.js  |   7 +-
 .../preactConfig/cjs/function.js              |   9 +-
 .../preactConfig/cjs/object.js                |   9 +-
 .../preactConfig/esm/function.js              |   9 +-
 .../preactConfig/esm/object.js                |   9 +-
 .../subjects/public-path/preact.config.js     |   2 +-
 packages/cli/tests/watch.test.js              |  11 --
 32 files changed, 374 insertions(+), 544 deletions(-)
 create mode 100644 .changeset/sweet-snakes-cheat.md
 delete mode 100644 packages/cli/babel/index.js

diff --git a/.changeset/sweet-snakes-cheat.md b/.changeset/sweet-snakes-cheat.md
new file mode 100644
index 000000000..4f87f1b9e
--- /dev/null
+++ b/.changeset/sweet-snakes-cheat.md
@@ -0,0 +1,12 @@
+---
+'preact-cli': major
+---
+
+- Upgrades to Webpack v5
+  - Any custom configuration you do in your `preact.config.js` may need to be altered to account for this. Plugins may need replacements or different option formats.
+
+- `--esm` flag has been removed
+  - Dual output is now enabled by default in production builds.
+
+- `.babelrc` no longer overwrites matching keys
+  - Instead, the config will be merged in to the default. The default still takes precedence when there are conflicts, so you will still need to use your `preact.config.js` if you want to edit or remove default plugins or presets.
diff --git a/.eslintignore b/.eslintignore
index 66e817fc8..4ec2f1666 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 **/node_modules
 **/tests/output
+**/tests/subjects/*/preact.config.js
 **/*.d.ts
diff --git a/README.md b/README.md
index 91b5651c2..3e78f14e0 100644
--- a/README.md
+++ b/README.md
@@ -114,7 +114,7 @@ Note: If you don't specify enough data to the `npx preact-cli create` command, i
 
 Create a production build
 
-You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-esm`, and `--no-inline-css`.
+You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-prerender`, and `--no-inline-css`.
 
 ```
 $ preact build
@@ -122,7 +122,6 @@ $ preact build
     --src              Specify source directory  (default src)
     --dest             Specify output directory  (default build)
     --cwd              A directory to use instead of $PWD  (default .)
-    --esm              Builds ES-2015 bundles for your code  (default true)
     --sw               Generate and attach a Service Worker  (default true)
     --babelConfig      Path to custom Babel config (default .babelrc)
     --json             Generate build stats for bundle analysis
@@ -147,7 +146,6 @@ $ preact watch
 
     --src              Specify source directory  (default src)
     --cwd              A directory to use instead of $PWD  (default .)
-    --esm              Builds ES-2015 bundles for your code  (default false)
     --clear            Clear the console (default true)
     --sw               Generate and attach a Service Worker  (default false)
     --babelConfig      Path to custom Babel config (default .babelrc)
@@ -200,7 +198,7 @@ To make customizing your configuration easier, preact-cli supports plugins. Visi
 
 #### Browserslist
 
-You may customize your list of supported browser versions by declaring a [`"browserslist"`] key within your `package.json`. Changing these values will modify your JavaScript (via [`@babel/preset-env`]) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
+You may customize your list of supported browser versions by declaring a [`"browserslist"`] key within your `package.json`. Changing these values will modify your legacy JavaScript (via [`@babel/preset-env`]) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
 
 By default, `preact-cli` emulates the following config:
 
@@ -208,7 +206,7 @@ By default, `preact-cli` emulates the following config:
 
 ```json
 {
-	"browserslist": ["> 0.25%", "IE >= 9"]
+	"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"]
 }
 ```
 
@@ -216,9 +214,9 @@ By default, `preact-cli` emulates the following config:
 
 To customize Babel, you have two options:
 
-1. You may create a [`.babelrc`] file in your project's root directory. Any settings you define here will overwrite matching config-keys within [Preact CLI preset]. For example, if you pass a `"plugins"` object, it will replace & reset all Babel plugins that Preact CLI defaults to.
+1. You may create a [`.babelrc`] file in your project's root directory, or use the `--babelConfig` path to point at any valid [Babel config file]. Any settings you define here will be merged into the [Preact CLI preset]. For example, if you pass a `"plugins"` object containing different plugins from those already in use, they will simply be added on top of the existing config. If there are conflicts, you'll want to look into option 2, as the default will take precedence.
 
-2. If you'd like to modify or add to the existing Babel config, you must use a `preact.config.js` file. Visit the [Webpack](#webpack) section for more info, or check out the [Customize Babel] example!
+2. If you'd like to modify the existing Babel config you must use a `preact.config.js` file. Visit the [Webpack](#webpack) section for more info, or check out the [Customize Babel] example!
 
 #### Webpack
 
@@ -410,9 +408,9 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
 [preact]: https://github.com/preactjs/preact
 [webpackconfighelpers]: docs/webpack-helpers.md
 [`.babelrc`]: https://babeljs.io/docs/usage/babelrc
+[babel config file]: https://babeljs.io/docs/en/config-files
 [simple]: https://github.com/preactjs-templates/simple
 [`"browserslist"`]: https://github.com/ai/browserslist
-[```.babelrc```]: https://babeljs.io/docs/usage/babelrc
 [default]: https://github.com/preactjs-templates/default
 [workbox]: https://developers.google.com/web/tools/workbox
 [preact-router]: https://github.com/preactjs/preact-router
diff --git a/packages/cli/babel/index.js b/packages/cli/babel/index.js
deleted file mode 100644
index e9dd1113c..000000000
--- a/packages/cli/babel/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var isProd = (process.env.BABEL_ENV || process.env.NODE_ENV) === 'production';
-/**
- * test env detection is used to default mode for
- * preset-env modules to "commonjs" otherwise, testing framework
- * will struggle
- */
-var isTest = (process.env.BABEL_ENV || process.env.NODE_ENV) === 'test';
-
-// default supported browsers for prod nomodule bundles:
-var defaultBrowserList = ['> 0.25%', 'IE >= 9'];
-
-// default supported browsers for all dev bundles (module/nomodule is not used):
-// see https://github.com/babel/babel/blob/master/packages/babel-compat-data/data/native-modules.json
-var defaultBrowserListDev = [
-	'chrome >= 61',
-	'and_chr >= 61',
-	'android >= 61',
-	'firefox >= 60',
-	'and_ff >= 60',
-	'safari >= 10.1',
-	'ios_saf >= 10.3',
-	'edge >= 16',
-	'opera >= 48',
-	'samsung >= 8.2',
-];
-
-// preact-cli babel configs
-var babelConfigs = require('../src/lib/babel-config');
-
-/**
- * preset as a function means allow users to override some options
- * like env, modules for environment
- */
-module.exports = function preactCli(ctx, userOptions = {}) {
-	// set default configs based on user environment
-	var presetOptions = {
-		env: isProd ? 'production' : 'development',
-		modules: isTest ? 'commonjs' : false,
-		browsers: isProd ? defaultBrowserList : defaultBrowserListDev,
-	};
-
-	// user specified options always the strongest
-	Object.keys(presetOptions).forEach(function (key) {
-		presetOptions[key] = userOptions[key] || presetOptions[key];
-	});
-
-	// yay! return the configs
-	return babelConfigs(
-		{ env: { production: presetOptions.env === 'production' } },
-		{ modules: presetOptions.modules, browsers: presetOptions.browsers }
-	);
-};
diff --git a/packages/cli/package.json b/packages/cli/package.json
index fa10e3959..4ad67cb27 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -35,10 +35,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.13.16",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.12.13",
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/preset-env": "^7.13.15",
@@ -46,66 +43,59 @@
     "@preact/async-loader": "^3.0.2",
     "@prefresh/babel-plugin": "^0.4.1",
     "@prefresh/webpack": "^3.2.2",
-    "@types/webpack": "^4.38.0",
     "autoprefixer": "^10.4.7",
-    "babel-esm-plugin": "^0.9.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.20.3",
-    "compression-webpack-plugin": "^6.1.1",
+    "compression-webpack-plugin": "^9.2.0",
     "console-clear": "^1.0.0",
-    "copy-webpack-plugin": "^6.4.0",
+    "copy-webpack-plugin": "^9.1.0",
     "critters-webpack-plugin": "^3.0.2",
     "cross-spawn-promise": "^0.10.1",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.6.0",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "^16.0.0",
     "ejs-loader": "^0.5.0",
     "envinfo": "^7.8.1",
     "esm": "^3.2.25",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^4.0.4",
+    "fork-ts-checker-webpack-plugin": "^7.1.1",
     "get-port": "^5.0.0",
     "gittar": "^0.1.0",
     "glob": "^8.0.3",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "html-webpack-skip-assets-plugin": "1.0.3",
     "ip": "^1.1.8",
     "isomorphic-unfetch": "^3.1.0",
     "kleur": "^4.1.4",
-    "loader-utils": "^2.0.0",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.5.3",
     "minimatch": "^3.0.3",
     "native-url": "0.3.4",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "optimize-plugin": "^1.3.1",
     "ora": "^5.4.1",
-    "pnp-webpack-plugin": "^1.7.0",
     "postcss": "^8.4.13",
     "postcss-load-config": "^3.1.4",
-    "postcss-loader": "^4.2.0",
+    "postcss-loader": "^6.2.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "promise-polyfill": "^8.2.3",
     "prompts": "^2.4.2",
-    "raw-loader": "^4.0.2",
-    "react-refresh": "0.10.0",
+    "react-refresh": "0.11.0",
     "rimraf": "^3.0.2",
     "sade": "^1.8.1",
-    "size-plugin": "^3.0.0",
+    "size-plugin": "^2.0.2",
     "source-map": "^0.7.2",
     "source-map-loader": "^1.1.1",
     "stack-trace": "0.0.10",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.0",
     "update-notifier": "^5.1.0",
-    "url-loader": "^4.1.1",
     "validate-npm-package-name": "^4.0.0",
-    "webpack": "^4.44.2",
+    "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.9.0",
-    "webpack-fix-style-only-entries": "^0.6.1",
-    "webpack-manifest-plugin": "^4.1.1",
+    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",
-    "webpack-plugin-replace": "^1.2.0",
+    "webpack-remove-empty-scripts": "^0.7.2",
     "which": "^2.0.2",
     "workbox-cacheable-response": "^6.5.3",
     "workbox-core": "^6.5.3",
@@ -119,28 +109,29 @@
     "@types/jest": "^24.9.1",
     "html-looks-like": "^1.0.2",
     "jest": "^24.9.0",
-    "less": "^4.1.1",
-    "less-loader": "^7.3.0",
+    "less": "^4.1.3",
+    "less-loader": "^10.2.0",
+    "ncp": "^2.0.0",
     "p-retry": "^4.5.0",
     "polka": "^0.5.2",
-    "preact": "^10.5.13",
-    "preact-render-to-string": "^5.1.19",
+    "preact": "^10.11.3",
+    "preact-render-to-string": "^5.2.6",
     "preact-router": "^3.0.1",
-    "puppeteer": "^13.7.0",
-    "sass": "^1.34.0",
-    "sass-loader": "^10.2.0",
-    "shelljs": "^0.8.3",
+    "puppeteer": "^17.1.3",
+    "sass": "^1.56.1",
+    "sass-loader": "^12.4.0",
+    "shelljs": "^0.8.5",
     "sirv": "^1.0.11",
-    "stylus": "^0.54.8",
-    "stylus-loader": "^4.3.3",
+    "stylus": "^0.59.0",
+    "stylus-loader": "^6.2.0",
     "typescript": "~4.6.4"
   },
   "peerDependencies": {
-    "less-loader": "^7.3.0",
-    "preact": "*",
-    "preact-render-to-string": "*",
-    "sass-loader": "^10.2.0",
-    "stylus-loader": "^4.3.3",
+    "less-loader": "^10.2.0",
+    "preact": "^10.0.0",
+    "preact-render-to-string": "^5.0.0",
+    "sass-loader": "^12.4.0",
+    "stylus-loader": "^6.2.0",
     "typescript": "^4.6.4"
   },
   "peerDependenciesMeta": {
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
index e6e7f4863..04ed46c66 100755
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@@ -33,7 +33,6 @@ prog
 	.option('--src', 'Specify source directory', 'src')
 	.option('--dest', 'Specify output directory', 'build')
 	.option('--cwd', 'A directory to use instead of $PWD', '.')
-	.option('--esm', 'Builds ES-2015 bundles for your code', true)
 	.option('--sw', 'Generate and attach a Service Worker', true)
 	.option('--babelConfig', 'Path to custom Babel config', '.babelrc')
 	.option('--json', 'Generate build stats for bundle analysis', false)
@@ -85,7 +84,6 @@ prog
 	.describe('Start a live-reload server for development')
 	.option('--src', 'Specify source directory', 'src')
 	.option('--cwd', 'A directory to use instead of $PWD', '.')
-	.option('--esm', 'Builds ES-2015 bundles for your code', false)
 	.option('--clear', 'Clears the console when the devServer updates', true)
 	.option('--sw', 'Generate and attach a Service Worker')
 	.option('--babelConfig', 'Path to custom Babel config', '.babelrc')
diff --git a/packages/cli/src/lib/babel-config.js b/packages/cli/src/lib/babel-config.js
index df2bb1a90..288de4f2c 100644
--- a/packages/cli/src/lib/babel-config.js
+++ b/packages/cli/src/lib/babel-config.js
@@ -1,26 +1,31 @@
-module.exports = function (env, options = {}) {
-	const { production: isProd, refresh } = env || {};
+const { tryResolveConfig } = require('../util');
+
+module.exports = function (env) {
+	const { babelConfig, cwd, isProd, refresh } = env;
+
+	const resolvedConfig =
+		babelConfig &&
+		tryResolveConfig(cwd, babelConfig, babelConfig === '.babelrc');
 
 	return {
+		babelrc: false,
+		configFile: resolvedConfig,
 		presets: [
-			[
+			!isProd && [
 				require.resolve('@babel/preset-env'),
 				{
+					loose: true,
+					modules: false,
 					bugfixes: true,
-					modules: options.modules || false,
 					targets: {
-						browsers: options.browsers,
+						esmodules: true,
 					},
 					exclude: ['transform-regenerator'],
 				},
 			],
-		],
+		].filter(Boolean),
 		plugins: [
-			require.resolve('@babel/plugin-syntax-dynamic-import'),
-			require.resolve('@babel/plugin-transform-object-assign'),
 			[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-			require.resolve('@babel/plugin-proposal-class-properties'),
-			require.resolve('@babel/plugin-proposal-object-rest-spread'),
 			isProd &&
 				require.resolve('babel-plugin-transform-react-remove-prop-types'),
 			require.resolve('babel-plugin-macros'),
diff --git a/packages/cli/src/lib/entry.js b/packages/cli/src/lib/entry.js
index 13982b694..d65be9221 100644
--- a/packages/cli/src/lib/entry.js
+++ b/packages/cli/src/lib/entry.js
@@ -18,14 +18,12 @@ if (process.env.NODE_ENV === 'development') {
 		);
 	} else if (process.env.ADD_SW && 'serviceWorker' in navigator) {
 		navigator.serviceWorker.register(
-			normalizeURL(__webpack_public_path__) +
-				(process.env.ES_BUILD ? 'sw-esm.js' : 'sw.js')
+			normalizeURL(__webpack_public_path__) + 'sw.js'
 		);
 	}
 } else if (process.env.ADD_SW && 'serviceWorker' in navigator) {
 	navigator.serviceWorker.register(
-		normalizeURL(__webpack_public_path__) +
-			(process.env.ES_BUILD ? 'sw-esm.js' : 'sw.js')
+		normalizeURL(__webpack_public_path__) + 'sw.js'
 	);
 }
 
diff --git a/packages/cli/src/lib/webpack/proxy-loader.js b/packages/cli/src/lib/webpack/proxy-loader.js
index 27c7b56fb..f02648b8d 100644
--- a/packages/cli/src/lib/webpack/proxy-loader.js
+++ b/packages/cli/src/lib/webpack/proxy-loader.js
@@ -1,7 +1,5 @@
-var utils = require('loader-utils');
-
 function proxyLoader(source, map) {
-	var options = utils.getOptions(this);
+	var options = this.getOptions();
 
 	// First run proxy-loader run
 	if (!this.query.__proxy_loader__) {
diff --git a/packages/cli/src/lib/webpack/push-manifest.js b/packages/cli/src/lib/webpack/push-manifest.js
index b9966b814..5e8938748 100644
--- a/packages/cli/src/lib/webpack/push-manifest.js
+++ b/packages/cli/src/lib/webpack/push-manifest.js
@@ -1,4 +1,4 @@
-const webpack = require('webpack');
+const { Compilation, sources } = require('webpack');
 const createLoadManifest = require('./create-load-manifest');
 
 module.exports = class PushManifestPlugin {
@@ -6,32 +6,27 @@ module.exports = class PushManifestPlugin {
 		this.isProd = isProd;
 	}
 	apply(compiler) {
-		compiler.hooks.emit.tap(
-			{
-				name: 'PushManifestPlugin',
-				stage: webpack.Compiler.PROCESS_ASSETS_STAGE_REPORT,
-			},
-			compilation => {
-				const manifest = createLoadManifest(
-					compilation.assets,
-					compilation.namedChunkGroups,
-					this.isProd
-				);
+		compiler.hooks.thisCompilation.tap('PushManifestPlugin', compilation => {
+			compilation.hooks.processAssets.tap(
+				{
+					name: 'PushManifestPlugin',
+					stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
+				},
+				() => {
+					const manifest = JSON.stringify(
+						createLoadManifest(
+							compilation.assets,
+							compilation.namedChunkGroups,
+							this.isProd
+						)
+					);
 
-				let output = JSON.stringify(manifest);
-				compilation.assets['push-manifest.json'] = {
-					source() {
-						return output;
-					},
-					size() {
-						return output.length;
-					},
-				};
-
-				return compilation;
-
-				// callback();
-			}
-		);
+					compilation.emitAsset(
+						'push-manifest.json',
+						new sources.RawSource(manifest)
+					);
+				}
+			);
+		});
 	}
 };
diff --git a/packages/cli/src/lib/webpack/render-html-plugin.js b/packages/cli/src/lib/webpack/render-html-plugin.js
index 833ffeac9..d28404bd9 100644
--- a/packages/cli/src/lib/webpack/render-html-plugin.js
+++ b/packages/cli/src/lib/webpack/render-html-plugin.js
@@ -1,6 +1,7 @@
 const { resolve, join } = require('path');
 const os = require('os');
 const { existsSync, mkdtempSync, readFileSync, writeFileSync } = require('fs');
+const { Compilation, sources } = require('webpack');
 const {
 	HtmlWebpackSkipAssetsPlugin,
 } = require('html-webpack-skip-assets-plugin');
@@ -184,20 +185,28 @@ class PrerenderDataExtractPlugin {
 		this.data_ = JSON.stringify(page || {});
 	}
 	apply(compiler) {
-		compiler.hooks.emit.tap('PrerenderDataExtractPlugin', compilation => {
-			if (this.location_ === `${PREACT_FALLBACK_URL}/`) {
-				// We dont build prerender data for `200.html`. It can re-use the one for homepage.
-				return;
-			}
-			let path = this.location_ + 'preact_prerender_data.json';
-			if (path.startsWith('/')) {
-				path = path.substr(1);
+		compiler.hooks.thisCompilation.tap(
+			'PrerenderDataExtractPlugin',
+			compilation => {
+				compilation.hooks.processAssets.tap(
+					{
+						name: 'PrerenderDataExtractPlugin',
+						stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+					},
+					() => {
+						if (this.location_ === `${PREACT_FALLBACK_URL}/`) {
+							// We dont build prerender data for `200.html`. It can re-use the one for homepage.
+							return;
+						}
+						let path = this.location_ + 'preact_prerender_data.json';
+						if (path.startsWith('/')) {
+							path = path.substr(1);
+						}
+						compilation.emitAsset(path, new sources.RawSource(this.data_));
+					}
+				);
 			}
-			compilation.assets[path] = {
-				source: () => this.data_,
-				size: () => this.data_.length,
-			};
-		});
+		);
 	}
 }
 
diff --git a/packages/cli/src/lib/webpack/run-webpack.js b/packages/cli/src/lib/webpack/run-webpack.js
index ecbf31354..989303532 100644
--- a/packages/cli/src/lib/webpack/run-webpack.js
+++ b/packages/cli/src/lib/webpack/run-webpack.js
@@ -95,26 +95,13 @@ function showStats(stats, isProd) {
 		if (stats.hasErrors()) {
 			allFields(stats, 'errors')
 				.map(stripLoaderPrefix)
-				.forEach(msg => error(msg, isProd ? 1 : 0));
+				.forEach(({ message }) => error(message, isProd ? 1 : 0));
 		}
 
 		if (stats.hasWarnings()) {
 			allFields(stats, 'warnings')
 				.map(stripLoaderPrefix)
-				.forEach(msg => {
-					if (
-						msg.match(
-							/Conflict: Multiple assets emit different content to the same filename .*\.(css|map)/
-						)
-					) {
-						/**
-						 * This particular warning is expected due to `babel-esm-plugin`.
-						 * This can be removed when upgrading to webpack5 with https://webpack.js.org/configuration/output/#outputcomparebeforeemit
-						 */
-						return;
-					}
-					warn(msg);
-				});
+				.forEach(({ message }) => warn(message));
 		}
 	}
 
diff --git a/packages/cli/src/lib/webpack/transform-config.js b/packages/cli/src/lib/webpack/transform-config.js
index a36ae6425..79cee333c 100644
--- a/packages/cli/src/lib/webpack/transform-config.js
+++ b/packages/cli/src/lib/webpack/transform-config.js
@@ -240,6 +240,7 @@ class WebpackConfigHelpers {
 			)
 			.reduce((arr, loaders) => arr.concat(loaders), [])
 			.filter(({ loader }) => {
+				if (!loader) return false;
 				if (typeof loader === 'string') return loader.includes(name);
 				return typeof loader.loader === 'string' &&
 					loader.loader.includes('proxy-loader')
diff --git a/packages/cli/src/lib/webpack/webpack-base-config.js b/packages/cli/src/lib/webpack/webpack-base-config.js
index 31f95e4e1..8b76df71c 100644
--- a/packages/cli/src/lib/webpack/webpack-base-config.js
+++ b/packages/cli/src/lib/webpack/webpack-base-config.js
@@ -6,13 +6,11 @@ const { isInstalledVersionPreactXOrAbove } = require('./utils');
 const autoprefixer = require('autoprefixer');
 const browserslist = require('browserslist');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const ReplacePlugin = require('webpack-plugin-replace');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const createBabelConfig = require('../babel-config');
 const loadPostcssConfig = require('postcss-load-config');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
 function readJson(file) {
@@ -47,41 +45,24 @@ function resolveTsconfig(cwd, isProd) {
 	}
 }
 
-function getSassConfiguration(...includePaths) {
-	const config = {
-		sourceMap: true,
-		sassOptions: {
-			includePaths,
-		},
-	};
-
-	Object.defineProperty(config, 'includePaths', { value: includePaths });
-
-	return config;
-}
-
 /**
  * @returns {import('webpack').Configuration}
  */
 module.exports = function createBaseConfig(env) {
 	const { cwd, isProd, isWatch, src, source } = env;
-	const babelConfigFile = env.babelConfig || '.babelrc';
 	const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
 	// Apply base-level `env` values
 	env.dest = resolve(cwd, env.dest || 'build');
 	env.manifest = readJson(source('manifest.json')) || {};
 	env.pkg = readJson(resolve(cwd, 'package.json')) || {};
 
-	let babelrc = readJson(resolve(cwd, babelConfigFile)) || {};
-
 	// use browserslist config environment, config default, or default browsers
-	// default browsers are > 0.25% global market share or Internet Explorer >= 9
-	const browserslistDefaults = ['> 0.25%', 'IE >= 9'];
+	// default browsers are '> 0.5%, last 2 versions, Firefox ESR, not dead'
 	const browserlistConfig = Object(browserslist.findConfig(cwd));
 	const browsers =
 		(isProd ? browserlistConfig.production : browserlistConfig.development) ||
 		browserlistConfig.defaults ||
-		browserslistDefaults;
+		'defaults';
 
 	let userNodeModules = findAllNodeModules(cwd);
 	let cliNodeModules = findAllNodeModules(__dirname);
@@ -142,7 +123,7 @@ module.exports = function createBaseConfig(env) {
 				style: source('style'),
 				'preact-cli-entrypoint': source('index'),
 				url: dirname(require.resolve('native-url/package.json')),
-				// preact-compat aliases for supporting React dependencies:
+				// preact/compat aliases for supporting React dependencies:
 				react: compat,
 				'react-dom': compat,
 				'preact-compat': compat,
@@ -151,10 +132,6 @@ module.exports = function createBaseConfig(env) {
 					? require.resolve('@preact/async-loader/async')
 					: require.resolve('@preact/async-loader/async-legacy'),
 			},
-			plugins: [
-				// TODO: Remove when upgrading to webpack 5
-				PnpWebpackPlugin,
-			],
 		},
 
 		resolveLoader: {
@@ -167,19 +144,13 @@ module.exports = function createBaseConfig(env) {
 		module: {
 			rules: [
 				{
-					// ES2015
 					enforce: 'pre',
 					test: /\.m?[jt]sx?$/,
-					resolve: { mainFields: ['module', 'jsnext:main', 'browser', 'main'] },
 					type: 'javascript/auto',
 					use: [
 						{
 							loader: require.resolve('babel-loader'),
-							options: Object.assign(
-								{ babelrc: false },
-								createBabelConfig(env, { browsers }),
-								babelrc // intentionally overwrite our settings
-							),
+							options: createBabelConfig(env),
 						},
 						require.resolve('source-map-loader'),
 					],
@@ -214,7 +185,12 @@ module.exports = function createBaseConfig(env) {
 							options: {
 								cwd,
 								loader: tryResolveOptionalLoader('sass-loader'),
-								options: getSassConfiguration(...nodeModules),
+								options: {
+									sourceMap: true,
+									sassOptions: {
+										includePaths: [...nodeModules],
+									},
+								},
 							},
 						},
 					],
@@ -298,13 +274,11 @@ module.exports = function createBaseConfig(env) {
 				},
 				{
 					test: /\.(xml|html|txt|md)$/,
-					loader: require.resolve('raw-loader'),
+					type: 'asset/source',
 				},
 				{
 					test: /\.(svg|woff2?|ttf|eot|jpe?g|png|webp|avif|gif|mp4|mov|ogg|webm)(\?.*)?$/i,
-					loader: isProd
-						? require.resolve('file-loader')
-						: require.resolve('url-loader'),
+					type: isProd ? 'asset/resource' : 'asset/inline',
 				},
 			],
 		},
@@ -331,8 +305,7 @@ module.exports = function createBaseConfig(env) {
 				Fragment: ['preact', 'Fragment'],
 			}),
 			// Fix for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
-			new FixStyleOnlyEntriesPlugin(),
-			// Extract CSS
+			new RemoveEmptyScriptsPlugin(),
 			new MiniCssExtractPlugin({
 				filename: isProd ? '[name].[contenthash:5].css' : '[name].css',
 				chunkFilename: isProd
@@ -355,37 +328,20 @@ module.exports = function createBaseConfig(env) {
 				// This is just to avoid any potentially breaking changes for right now.
 				publicPath: '',
 			}),
-			...(tsconfig
-				? [
-						new ForkTsCheckerWebpackPlugin({
-							checkSyntacticErrors: true,
-							async: !isProd,
-							tsconfig: tsconfig,
-							silent: !isWatch,
-						}),
-				  ]
-				: []),
-			...(isProd
-				? [
-						new webpack.HashedModuleIdsPlugin(),
-						new webpack.LoaderOptionsPlugin({ minimize: true }),
-						new webpack.optimize.ModuleConcatenationPlugin(),
-
-						// strip out babel-helper invariant checks
-						new ReplacePlugin({
-							include: /babel-helper$/,
-							patterns: [
-								{
-									regex: /throw\s+(new\s+)?(Type|Reference)?Error\s*\(/g,
-									value: s => `return;${Array(s.length - 7).join(' ')}(`,
-								},
-							],
-						}),
-				  ]
-				: []),
-		],
+			tsconfig &&
+				new ForkTsCheckerWebpackPlugin({
+					typescript: {
+						configFile: tsconfig,
+						diagnosticOptions: {
+							syntactic: true,
+						},
+					},
+				}),
+			new webpack.optimize.ModuleConcatenationPlugin(),
+		].filter(Boolean),
 
 		optimization: {
+			...(isProd && { moduleIds: 'deterministic' }),
 			splitChunks: {
 				minChunks: 3,
 			},
@@ -393,15 +349,11 @@ module.exports = function createBaseConfig(env) {
 
 		mode: isProd ? 'production' : 'development',
 
-		devtool: isWatch ? 'cheap-module-eval-source-map' : 'source-map',
+		devtool: isWatch ? 'eval-cheap-module-source-map' : 'source-map',
 
 		node: {
-			console: false,
-			process: false,
-			Buffer: false,
 			__filename: false,
 			__dirname: false,
-			setImmediate: false,
 		},
 	};
 };
diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/packages/cli/src/lib/webpack/webpack-client-config.js
index d4c7bec20..4774e4872 100644
--- a/packages/cli/src/lib/webpack/webpack-client-config.js
+++ b/packages/cli/src/lib/webpack/webpack-client-config.js
@@ -7,17 +7,17 @@ const { filter } = require('minimatch');
 const SizePlugin = require('size-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
 const PushManifestPlugin = require('./push-manifest');
 const baseConfig = require('./webpack-base-config');
-const BabelEsmPlugin = require('babel-esm-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
 const { normalizePath, warn } = require('../../util');
+const OptimizePlugin = require('optimize-plugin');
 
 const cleanFilename = name =>
 	name.replace(
@@ -35,11 +35,6 @@ async function clientConfig(env) {
 		? require.resolve('@preact/async-loader')
 		: require.resolve('@preact/async-loader/legacy');
 
-	let entry = {
-		bundle: resolve(__dirname, './../entry'),
-		polyfills: resolve(__dirname, './polyfills'),
-	};
-
 	let swInjectManifest = [];
 	if (env.sw) {
 		let swPath = join(__dirname, '..', '..', '..', 'sw', 'sw.js');
@@ -50,36 +45,15 @@ async function clientConfig(env) {
 			warn(`Could not find sw.js in ${src}. Using the default service worker.`);
 		}
 
-		if (env.esm) {
-			swInjectManifest.push(
-				new InjectManifest({
-					swSrc: swPath,
-					swDest: 'sw-esm.js',
-					include: [
-						/200\.html$/,
-						/\.esm.js$/,
-						/\.css$/,
-						/\.(png|jpg|svg|gif|webp|avif)$/,
-					],
-					webpackCompilationPlugins: [
-						new webpack.DefinePlugin({
-							'process.env.ESM': true,
-						}),
-					],
-				})
-			);
-		}
-
 		swInjectManifest.push(
 			new InjectManifest({
 				swSrc: swPath,
 				include: [
 					/200\.html$/,
-					/\.js$/,
+					/(?<!legacy|polyfills)\.js$/,
 					/\.css$/,
 					/\.(png|jpg|svg|gif|webp|avif)$/,
 				],
-				exclude: [/\.esm\.js$/],
 			})
 		);
 	}
@@ -101,7 +75,10 @@ async function clientConfig(env) {
 	].filter(Boolean);
 
 	return {
-		entry: entry,
+		entry: {
+			bundle: resolve(__dirname, './../entry'),
+			'dom-polyfills': resolve(__dirname, './polyfills'),
+		},
 		output: {
 			path: env.dest,
 			publicPath: '/',
@@ -147,13 +124,11 @@ async function clientConfig(env) {
 
 		plugins: [
 			new webpack.DefinePlugin({
-				'process.env.ES_BUILD': false,
 				'process.env.ADD_SW': env.sw,
 				'process.env.PRERENDER': env.prerender,
 			}),
 			new PushManifestPlugin(env.isProd),
 			...(await renderHTMLPlugin(env)),
-			...getBabelEsmPlugin(env),
 			copyPatterns.length !== 0 &&
 				new CopyWebpackPlugin({
 					patterns: copyPatterns,
@@ -163,41 +138,6 @@ async function clientConfig(env) {
 	};
 }
 
-function getBabelEsmPlugin(env) {
-	const esmPlugins = [];
-	if (env.esm) {
-		esmPlugins.push(
-			new BabelEsmPlugin({
-				filename: env.isProd ? '[name].[chunkhash:5].esm.js' : '[name].esm.js',
-				chunkFilename: '[name].chunk.[chunkhash:5].esm.js',
-				excludedPlugins: ['BabelEsmPlugin', 'InjectManifest'],
-				beforeStartExecution: plugins => {
-					plugins.forEach(plugin => {
-						if (
-							plugin.constructor.name === 'DefinePlugin' &&
-							plugin.definitions
-						) {
-							for (const definition in plugin.definitions) {
-								if (definition === 'process.env.ES_BUILD') {
-									plugin.definitions[definition] = true;
-								}
-							}
-						} else if (
-							plugin.constructor.name === 'DefinePlugin' &&
-							!plugin.definitions
-						) {
-							throw new Error(
-								'WebpackDefinePlugin found but not `process.env.ES_BUILD`.'
-							);
-						}
-					});
-				},
-			})
-		);
-	}
-	return esmPlugins;
-}
-
 /**
  * @returns {import('webpack').Configuration}
  */
@@ -214,17 +154,24 @@ function isProd(env) {
 		),
 
 		plugins: [
-			new webpack.DefinePlugin({
-				'process.env.ESM': env.esm,
+			new OptimizePlugin({
+				polyfillsFilename: 'es-polyfills.js',
+				exclude: [/^sw.*\.js/, /^dom-polyfills.*\.js/],
+				modernize: false,
+				verbose: false,
+			}),
+			new SizePlugin({
+				stripHash: name =>
+					name.replace(/\.[a-z0-9]{5}((\.legacy)?\.(?:js|css)$)/i, '.*****$1'),
 			}),
-			new SizePlugin(),
 		],
+		cache: true,
 
 		optimization: {
 			minimizer: [
 				new TerserPlugin({
-					cache: true,
-					parallel: true,
+					extractComments: false,
+					test: /(sw|dom-polyfills).*\.js$/,
 					terserOptions: {
 						output: { comments: false },
 						mangle: true,
@@ -242,16 +189,8 @@ function isProd(env) {
 							],
 						},
 					},
-					extractComments: false,
-					sourceMap: true,
-				}),
-				new OptimizeCssAssetsPlugin({
-					cssProcessorOptions: {
-						// Fix keyframes in different CSS chunks minifying to colliding names:
-						reduceIdents: false,
-						map: { inline: false, annotation: true },
-					},
 				}),
+				new CssMinimizerPlugin(),
 			],
 		},
 	};
@@ -276,7 +215,7 @@ function isProd(env) {
 			new CompressionPlugin({
 				filename: '[path][base].br[query]',
 				algorithm: 'brotliCompress',
-				test: /\.esm\.js$/,
+				test: /(?<!legacy)\.js$/,
 			})
 		);
 	}
@@ -331,10 +270,11 @@ function isDev(env) {
 		infrastructureLogging: {
 			level: 'info',
 		},
-		plugins: [
-			new webpack.NamedModulesPlugin(),
-			env.refresh && new RefreshPlugin(),
-		].filter(Boolean),
+		plugins: [env.refresh && new RefreshPlugin()].filter(Boolean),
+
+		optimization: {
+			moduleIds: 'named',
+		},
 
 		devServer: {
 			hot: env.refresh,
diff --git a/packages/cli/src/resources/body-end.ejs b/packages/cli/src/resources/body-end.ejs
index 0444b0725..96808477f 100644
--- a/packages/cli/src/resources/body-end.ejs
+++ b/packages/cli/src/resources/body-end.ejs
@@ -4,15 +4,11 @@
 		<%= encodeURI(JSON.stringify(cli.CLI_DATA)) %>
 	</script>
 <% } %>
-<% if (htmlWebpackPlugin.files.js.filter(entry => entry.match(/bundle(\.\w{5})?.esm.js$/)).length > 0) { %>
-	<script crossorigin="anonymous" src="<%= htmlWebpackPlugin.files.js.filter(entry => entry.match(/bundle(\.\w{5})?.esm.js$/))[0] %>" type="module"></script>
-	<%
-		/*Fetch and Promise polyfills are not needed for browsers that support type=module
-		Please re-evaluate below line if adding more polyfills.*/
-	%>
-	<script nomodule src="<%= cli.entrypoints['polyfills'] %>"></script>
-	<script nomodule defer src="<%= cli.entrypoints['bundle'] %>"></script>
-<% } else { %>
-	<script <%= htmlWebpackPlugin.options.scriptLoading %>  src="<%= cli.entrypoints['bundle'] %>"></script>
-	<script nomodule src="<%= cli.entrypoints['polyfills'] %>"></script>
-<% } %>
+<script crossorigin="anonymous" src="<%= cli.entrypoints['bundle'] %>" type="module"></script>
+<% /*
+       Fetch and Promise polyfills are not needed for browsers that support type=module
+       Please re-evaluate below line if adding more polyfills.
+*/ %>
+<script nomodule src="<%= cli.entrypoints['dom-polyfills'] %>"></script>
+<script nomodule src="<%= htmlWebpackPlugin.files.publicPath + 'es-polyfills.js'%>"></script>
+<script nomodule defer src="<%= cli.entrypoints['bundle'].replace(/\.js$/, '.legacy.js') %>"></script>
diff --git a/packages/cli/src/resources/head-end.ejs b/packages/cli/src/resources/head-end.ejs
index 8ca472a8b..07ff50c69 100644
--- a/packages/cli/src/resources/head-end.ejs
+++ b/packages/cli/src/resources/head-end.ejs
@@ -6,6 +6,6 @@
 <% for (const file in cli.loadManifest[cli.url]) { %>
 	<% if (cli.preload && file && file.match(filesRegexp)) { %>
 		<% /* crossorigin for main bundle as that is loaded from `<script type=module` tag, other lazy loaded bundles are from webpack so its not needed */ %>
-		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.esm\.js$/)?'crossorigin="anonymous"':'' %>>
+		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.(?<!legacy)\.js$/)?'crossorigin="anonymous"':'' %>>
 	<% } %>
 <% } %>
diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
index df70c15e1..650e18421 100644
--- a/packages/cli/tests/build.test.js
+++ b/packages/cli/tests/build.test.js
@@ -2,7 +2,7 @@ const { join } = require('path');
 const { access, mkdir, readdir, readFile, rename, unlink, writeFile } =
 	require('fs').promises;
 const looksLike = require('html-looks-like');
-const { create, build } = require('./lib/cli');
+const { create, build, buildFast } = require('./lib/cli');
 const { snapshot } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
@@ -71,30 +71,21 @@ describe('preact build', () => {
 		testMatch(output, images.default);
 	});
 
-	it('builds the `default` template with esm', async () => {
-		let dir = await create('default');
-
-		await build(dir, { esm: true });
-
-		let output = await snapshot(join(dir, 'build'));
-		testMatch(output, images['default-esm']);
-	});
-
 	it('builds the `typescript` template', async () => {
 		let dir = await create('typescript');
 
-		await expect(build(dir)).resolves.not.toThrow();
+		await expect(buildFast(dir)).resolves.not.toThrow();
 	});
 
 	it('should patch global location object', async () => {
 		let dir = await subject('location-patch');
 
-		await expect(build(dir)).resolves.not.toThrow();
+		await expect(buildFast(dir)).resolves.not.toThrow();
 	});
 
 	it('should copy resources from static to build directory', async () => {
 		let dir = await subject('static-root');
-		await build(dir);
+		await buildFast(dir);
 		let file = join(dir, 'build', '.htaccess');
 		expect(await access(file)).toBeUndefined();
 	});
@@ -103,7 +94,7 @@ describe('preact build', () => {
 		it('should produce correct default `push-manifest.json`', async () => {
 			let dir = await create('default');
 
-			await build(dir);
+			await buildFast(dir);
 			const manifest = await readFile(
 				`${dir}/build/push-manifest.json`,
 				'utf8'
@@ -113,24 +104,11 @@ describe('preact build', () => {
 			);
 		});
 
-		it('should produce correct default `push-manifest.json` with esm', async () => {
-			let dir = await create('default');
-
-			await build(dir, { esm: true });
-			const manifest = await readFile(
-				`${dir}/build/push-manifest.json`,
-				'utf8'
-			);
-			expect(manifest).toEqual(
-				expect.stringMatching(getRegExpFromMarkup(images.pushManifestEsm))
-			);
-		});
-
 		it('should produce correct `push-manifest.json` when expected values are missing', async () => {
 			// In this subject, there is no source CSS which means no CSS asset is output.
 			// In the past, this would result in `"undefined": { type: "style" ... }` being added to the manifest.
 			let dir = await subject('custom-webpack');
-			await build(dir);
+			await buildFast(dir);
 			const manifest = await readFile(
 				`${dir}/build/push-manifest.json`,
 				'utf8'
@@ -151,7 +129,7 @@ describe('preact build', () => {
 				)
 			);
 
-			await build(dir, { prerender: false });
+			await buildFast(dir, { prerender: false });
 			const manifest = await readFile(
 				`${dir}/build/push-manifest.json`,
 				'utf8'
@@ -166,7 +144,7 @@ describe('preact build', () => {
 
 	it('should use a custom `.env` with prefixed environment variables', async () => {
 		let dir = await subject('custom-dotenv');
-		await build(dir);
+		await buildFast(dir);
 
 		const bundleFile = (await readdir(`${dir}/build`)).find(file =>
 			/bundle\.\w{5}\.js$/.test(file)
@@ -183,7 +161,7 @@ describe('preact build', () => {
 
 	it('should respect `publicPath` value', async () => {
 		let dir = await subject('public-path');
-		await build(dir);
+		await buildFast(dir);
 		const html = await getOutputFile(dir, 'index.html');
 
 		expect(html).toEqual(
@@ -199,13 +177,13 @@ describe('preact build', () => {
 			await rename(join(dir, 'index.js'), join(dir, 'renamed-src/index.js'));
 			await rename(join(dir, 'style.css'), join(dir, 'renamed-src/style.css'));
 
-			await expect(build(dir, { src: 'renamed-src' })).resolves.toBeUndefined();
+			await expect(buildFast(dir, { src: 'renamed-src' })).resolves.not.toThrow();
 		});
 
 		it('--dest', async () => {
 			let dir = await subject('minimal');
 
-			await build(dir, { dest: 'renamed-dest' });
+			await buildFast(dir, { dest: 'renamed-dest' });
 			expect(await access(join(dir, 'renamed-dest'))).toBeUndefined();
 		});
 
@@ -214,42 +192,45 @@ describe('preact build', () => {
 
 			const logSpy = jest.spyOn(process.stdout, 'write');
 
-			await build(dir, { sw: true });
+			await buildFast(dir, { sw: true });
 			expect(await access(join(dir, 'build', 'sw.js'))).toBeUndefined();
 			expect(logSpy).toHaveBeenCalledWith(
 				expect.stringContaining('Could not find sw.js')
 			);
 
-			await build(dir, { sw: false });
+			await buildFast(dir, { sw: false });
 			await expect(access(join(dir, 'build', 'sw.js'))).rejects.toThrow(
 				'no such file or directory'
 			);
 		});
 
 		it('--babelConfig', async () => {
+			// Targets IE11, so arrow functions should be removed
+			// Prerendering is disabled to avoid (non-relevant) regenerator issues
 			let dir = await subject('custom-babelrc');
 
-			await build(dir);
+			await buildFast(dir, { prerender: false });
 			let transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/);
-			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(true);
+			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(false);
 
 			await rename(join(dir, '.babelrc'), join(dir, 'babel.config.json'));
-			await build(dir, {
+			await buildFast(dir, {
 				babelConfig: 'babel.config.json',
+				prerender: false,
 			});
 			transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/);
-			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(true);
+			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(false);
 		});
 
 		it('--json', async () => {
 			let dir = await subject('minimal');
 
-			await build(dir, { json: true });
+			await buildFast(dir, { json: true });
 			expect(await access(join(dir, 'stats.json'))).toBeUndefined();
 			// Need to clean up manually as it is placed in project root
 			await unlink(join(dir, 'stats.json'));
 
-			await build(dir, { json: false });
+			await buildFast(dir, { json: false });
 			await expect(access(join(dir, 'stats.json'))).rejects.toThrow(
 				'no such file or directory'
 			);
@@ -262,7 +243,7 @@ describe('preact build', () => {
 				join(dir, 'template.html'),
 				join(dir, 'renamed-template.html')
 			);
-			await build(dir, { template: 'renamed-template.html' });
+			await buildFast(dir, { template: 'renamed-template.html' });
 
 			const html = await getOutputFile(dir, 'index.html');
 			expect(html).toEqual(
@@ -273,13 +254,13 @@ describe('preact build', () => {
 		it('--preload', async () => {
 			let dir = await subject('preload-chunks');
 
-			await build(dir, { preload: true });
+			await buildFast(dir, { preload: true });
 			let head = await getHead(dir);
 			expect(head).toEqual(
 				expect.stringMatching(getRegExpFromMarkup(images.preload.true))
 			);
 
-			await build(dir, { preload: false });
+			await buildFast(dir, { preload: false });
 			head = await getHead(dir);
 			expect(head).toEqual(
 				expect.stringMatching(getRegExpFromMarkup(images.preload.false))
@@ -289,11 +270,11 @@ describe('preact build', () => {
 		it('--prerender', async () => {
 			let dir = await subject('minimal');
 
-			await build(dir, { prerender: true });
+			await buildFast(dir, { prerender: true });
 			let html = await getOutputFile(dir, 'index.html');
 			expect(html).toMatch('<h1>Minimal App</h1>');
 
-			await build(dir, { prerender: false });
+			await buildFast(dir, { prerender: false });
 			html = await getOutputFile(dir, 'index.html');
 			expect(html).not.toMatch('<h1>Minimal App</h1>');
 		});
@@ -301,7 +282,7 @@ describe('preact build', () => {
 		it('--prerenderUrls', async () => {
 			let dir = await subject('multiple-prerendering');
 
-			await build(dir, { prerenderUrls: 'prerender-urls.json' });
+			await buildFast(dir, { prerenderUrls: 'prerender-urls.json' });
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
 				await access(join(dir, 'build/route66/index.html'))
@@ -314,7 +295,7 @@ describe('preact build', () => {
 				join(dir, 'prerender-urls.json'),
 				join(dir, 'renamed-urls.json')
 			);
-			await build(dir, { prerenderUrls: 'renamed-urls.json' });
+			await buildFast(dir, { prerenderUrls: 'renamed-urls.json' });
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
 				await access(join(dir, 'build/route66/index.html'))
@@ -327,11 +308,11 @@ describe('preact build', () => {
 		it('--inline-css', async () => {
 			let dir = await subject('minimal');
 
-			await build(dir, { 'inline-css': true });
+			await buildFast(dir, { 'inline-css': true });
 			let head = await getHead(dir);
 			expect(head).toMatch('<style>h1{color:red}</style>');
 
-			await build(dir, { 'inline-css': false });
+			await buildFast(dir, { 'inline-css': false });
 			head = await getOutputFile(dir, 'index.html');
 			expect(head).not.toMatch(/<style>[^<]*<\/style>/);
 		});
@@ -339,14 +320,14 @@ describe('preact build', () => {
 		it('--config', async () => {
 			let dir = await subject('custom-webpack');
 
-			await build(dir, { config: 'preact.config.js' });
+			await buildFast(dir, { config: 'preact.config.js' });
 			expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
 
 			await rename(
 				join(dir, 'preact.config.js'),
 				join(dir, 'renamed-config.js')
 			);
-			await build(dir, { config: 'renamed-config.js' });
+			await buildFast(dir, { config: 'renamed-config.js' });
 			expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
 		});
 
@@ -371,7 +352,7 @@ describe('preact build', () => {
 				'h2{color:green}'
 			);
 
-			await build(dir);
+			await buildFast(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 
 			expect(builtStylesheet).toMatch('h1{color:red}');
@@ -382,7 +363,7 @@ describe('preact build', () => {
 
 		it('should use CSS Modules in `routes` and `components` directories', async () => {
 			let dir = await subject('css-auto-modules');
-			await build(dir);
+			await buildFast(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 			const builtSplitStylesheet = await getOutputFile(
 				dir,
@@ -396,7 +377,7 @@ describe('preact build', () => {
 
 		it('should inline critical CSS only', async () => {
 			let dir = await subject('css-inline');
-			await build(dir);
+			await buildFast(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 			const html = await getOutputFile(dir, 'index.html');
 
@@ -407,7 +388,7 @@ describe('preact build', () => {
 		// Issue #1411
 		it('should preserve side-effectful CSS imports even if package.json claims no side effects', async () => {
 			let dir = await subject('css-side-effect');
-			await build(dir);
+			await buildFast(dir);
 
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 			expect(builtStylesheet).toMatch('h1{background:#673ab8}');
@@ -415,7 +396,7 @@ describe('preact build', () => {
 
 		it('should use SASS styles', async () => {
 			let dir = await subject('css-sass');
-			await build(dir);
+			await buildFast(dir);
 
 			let body = await getBody(dir);
 			looksLike(body, images.sass);
@@ -426,7 +407,7 @@ describe('preact build', () => {
 		prerenderUrlFiles.forEach(prerenderUrls => {
 			it(`should prerender the routes provided with '${prerenderUrls}'`, async () => {
 				let dir = await subject('multiple-prerendering');
-				await build(dir, { prerenderUrls });
+				await buildFast(dir, { prerenderUrls });
 
 				const body1 = await getBody(dir);
 				looksLike(body1, images.prerender.home);
@@ -463,7 +444,7 @@ describe('preact build', () => {
 		prerenderUrlFiles.forEach(prerenderUrls => {
 			it(`should prerender the routes with data provided with '${prerenderUrls}' via provider`, async () => {
 				let dir = await subject('multiple-prerendering-with-provider');
-				await build(dir, { prerenderUrls });
+				await buildFast(dir, { prerenderUrls });
 
 				const body1 = await getBody(dir);
 				looksLike(body1, images.prerender.home);
diff --git a/packages/cli/tests/client.test.js b/packages/cli/tests/client.test.js
index 20dc2f265..5a946d19e 100644
--- a/packages/cli/tests/client.test.js
+++ b/packages/cli/tests/client.test.js
@@ -22,34 +22,34 @@ describe('client-side tests', () => {
 		PORT = await getPort();
 	});
 
-	it('should hydrate routes progressively with preact8.', async () => {
-		let dir = await subject('progressive-hydration-preact8');
-		await build(dir, {}, true);
-		const server = getServer(join(dir, 'build'), PORT);
+	//it('should hydrate routes progressively with preact8.', async () => {
+	//	let dir = await subject('progressive-hydration-preact8');
+	//	await build(dir, {}, true);
+	//	const server = getServer(join(dir, 'build'), PORT);
 
-		// let page = await loadPage(chrome, `http://127.0.0.1:${PORT}/`);
-		const page = await chrome.newPage();
+	//	// let page = await loadPage(chrome, `http://127.0.0.1:${PORT}/`);
+	//	const page = await chrome.newPage();
 
-		page.on('console', consoleMessage => {
-			// eslint-disable-next-line
-			console[consoleMessage.type()](consoleMessage.text());
-		});
+	//	page.on('console', consoleMessage => {
+	//		// eslint-disable-next-line
+	//		console[consoleMessage.type()](consoleMessage.text());
+	//	});
 
-		await page.goto(`http://127.0.0.1:${PORT}/`);
+	//	await page.goto(`http://127.0.0.1:${PORT}/`);
 
-		// await waitUntilExpression(page, `window.booted`);
-		await sleep(500);
+	//	// await waitUntilExpression(page, `window.booted`);
+	//	await sleep(500);
 
-		const mutations = await page.evaluate('window.ROOT_MUTATION_COUNT');
+	//	const mutations = await page.evaluate('window.ROOT_MUTATION_COUNT');
 
-		expect(mutations).toEqual(0);
+	//	expect(mutations).toEqual(0);
 
-		expect(await page.evaluate('window.CHANGED_VAR')).toEqual(undefined);
-		await page.click('button');
-		expect(await page.evaluate('window.CHANGED_VAR')).toEqual(1);
+	//	expect(await page.evaluate('window.CHANGED_VAR')).toEqual(undefined);
+	//	await page.click('button');
+	//	expect(await page.evaluate('window.CHANGED_VAR')).toEqual(1);
 
-		server.server.close();
-	});
+	//	server.server.close();
+	//});
 
 	it('should hydrate for pre-rendered URLs only', async () => {
 		let dir = await subject('prerendering-hydration');
diff --git a/packages/cli/tests/config-formats.test.js b/packages/cli/tests/config-formats.test.js
index a993ac4eb..67ea82002 100644
--- a/packages/cli/tests/config-formats.test.js
+++ b/packages/cli/tests/config-formats.test.js
@@ -1,6 +1,6 @@
 const { join } = require('path');
 const { access } = require('fs').promises;
-const { build } = require('./lib/cli');
+const { build, buildFast } = require('./lib/cli');
 const { subject } = require('./lib/output');
 
 const formats = ['cjs', 'esm'];
@@ -19,7 +19,7 @@ describe('config files', () => {
 		it(`should load the 'prerender-urls.json' file`, async () => {
 			let dir = await subject('multiple-config-files');
 
-			await build(dir);
+			await buildFast(dir);
 
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
@@ -32,7 +32,7 @@ describe('config files', () => {
 				it(`should load the '${dataFormat}' file in ${moduleFormat}`, async () => {
 					let dir = await subject('multiple-config-files');
 
-					await build(dir, {
+					await buildFast(dir, {
 						prerenderUrls: `prerenderUrls/${moduleFormat}/${dataFormat}`,
 					});
 
diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
index 818a38386..671fdb3aa 100644
--- a/packages/cli/tests/images/build.js
+++ b/packages/cli/tests/images/build.js
@@ -1,9 +1,4 @@
-const common = {
-	'polyfills.1ea90.js': 6426,
-	'polyfills.1ea90.js.map': 21668,
-};
-
-exports.default = Object.assign({}, common, {
+exports.default = {
 	'assets/icons/android-chrome-192x192.png': 14058,
 	'assets/icons/android-chrome-512x512.png': 51484,
 	'assets/icons/apple-touch-icon.png': 12746,
@@ -13,45 +8,47 @@ exports.default = Object.assign({}, common, {
 	'assets/preact-logo.svg': 645,
 	'assets/preact-logo-inverse.svg': 649,
 	'assets/favicon.ico': 15086,
-	'ssr-build/ssr-bundle.82489.css': 2601,
-	'ssr-build/ssr-bundle.82489.css.map': 3708,
-	'ssr-build/ssr-bundle.js': 28830,
-	'ssr-build/ssr-bundle.js.map': 52686,
-	'ssr-build/asset-manifest.json': 178,
-	'bundle.4c6ac.css': 1276,
-	'bundle.4c6ac.css.map': 2234,
-	'bundle.9131e.js': 22529,
-	'bundle.9131e.js.map': 111801,
+
+	'ssr-build/ssr-bundle.038a0.css': 2352,
+	'ssr-build/ssr-bundle.038a0.css.map': 3609,
+	'ssr-build/ssr-bundle.js': 27197,
+	'ssr-build/ssr-bundle.js.map': 61808,
+	'ssr-build/asset-manifest.json': 82,
+
+	'bundle.e1e75.js': 21563,
+	'bundle.e1e75.js.map': 86009,
+	'bundle.e1e75.legacy.js': 22586,
+	'bundle.e1e75.legacy.js.map': 107151,
+	'bundle.cf9c9.css': 1173,
+	'bundle.cf9c9.css.map': 2165,
+
+	'dom-polyfills.aeb97.js': 5221,
+	'dom-polyfills.aeb97.js.map': 18676,
+	'es-polyfills.js': 46419,
+
 	'favicon.ico': 15086,
-	'index.html': 4127,
+	'index.html': 3998,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 	'push-manifest.json': 388,
-	'asset-manifest.json': 1262,
-	'route-home.chunk.9bcab.css': 876,
-	'route-home.chunk.9bcab.css.map': 1349,
-	'route-home.chunk.5d28d.js': 1149,
-	'route-home.chunk.5d28d.js.map': 1961,
-	'route-profile.chunk.4c330.js': 3490,
-	'route-profile.chunk.4c330.js.map': 15002,
-});
-exports['default-esm'] = Object.assign({}, exports.default, {
-	'bundle.*.esm.js': 22249,
-	'bundle.*.esm.js.map': 113538,
-	'polyfills.*.esm.js': 5721,
-	'polyfills.*.esm.js.map': 21633,
-	'route-home.chunk.*.esm.js': 1127,
-	'route-home.chunk.*.esm.js.map': 1957,
-	'route-profile.chunk.*.esm.js': 2424,
-	'route-profile.chunk.*.esm.js.map': 14942,
-	'index.html': 4221,
-	'push-manifest.json': 404,
-	'asset-manifest.json': 1294,
-});
+	'asset-manifest.json': 1004,
+
+	'route-home.chunk.589f2.js': 1082,
+	'route-home.chunk.589f2.js.map': 3359,
+	'route-home.chunk.589f2.legacy.js': 1159,
+	'route-home.chunk.589f2.legacy.js.map': 3792,
+	'route-home.chunk.c81c9.css': 838,
+	'route-home.chunk.c81c9.css.map': 1406,
+
+	'route-profile.chunk.4de97.js': 3097,
+	'route-profile.chunk.4de97.js.map': 12751,
+	'route-profile.chunk.4de97.legacy.js': 3240,
+	'route-profile.chunk.4de97.legacy.js.map': 15421,
+};
 
 exports.sass = `
 <body>
-	<div class="background__2mKGE">
+	<div class="background__sL1ip">
 		<h1>Header on background</h1>
 		<p>Paragraph on background</p>
 	</div>
@@ -212,8 +209,10 @@ exports.template = `
 		<script defer="defer" src="/bundle.\\w{5}.js"></script>
 		<h2>This is an app with custom template</h2>
 		<script type="__PREACT_CLI_DATA__">%7B%22prerenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
-		<script blocking="" src="/bundle.\\w{5}.js"></script>
-		<script nomodule="" src="/polyfills.\\w{5}.js"></script>
+		<script crossorigin="anonymous" src="/bundle.\\w{5}.js" type="module"></script>
+		<script nomodule="" src="/dom-polyfills.\\w{5}.js"></script>
+		<script nomodule="" src="/es-polyfills.js"></script>
+		<script nomodule="" defer="defer" src="/bundle.\\w{5}.legacy.js"></script>
 	</body>
 </html>
 `;
@@ -255,43 +254,6 @@ exports.pushManifest = `
 }
 `;
 
-exports.pushManifestEsm = `
-{
-	"/":{
-		"bundle.\\w{5}.css":{
-			"type":"style",
-			"weight":1
-		},
-		"bundle.\\w{5}.esm.js":{
-			"type":"script",
-			"weight":1
-		},
-		"route-home.chunk.\\w{5}.esm.js":{
-			"type":"script",
-			"weight":0.9
-		},
-		"route-home.chunk.\\w{5}.css":{
-			"type":"style",
-			"weight":0.9
-		}
-	},
-	"/profile":{
-		"bundle.\\w{5}.css":{
-			"type":"style",
-			"weight":1
-		},
-		"bundle.\\w{5}.esm.js":{
-			"type":"script",
-			"weight":1
-		},
-		"route-profile.chunk.\\w{5}.esm.js":{
-			"type":"script",
-			"weight":0.9
-		}
-	}
-}
-`;
-
 exports.pushManifestAlteredFilenames = `
 {
 	"/":{
@@ -326,8 +288,10 @@ exports.publicPath = `
 	<body>
 		<h1>Public path test</h1>
 		<script type="__PREACT_CLI_DATA__">%7B%22prerenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
-		<script blocking="" src="/example-path/bundle.\\w{5}.js"></script>
-		<script nomodule="" src="/example-path/polyfills.\\w{5}.js"></script>
+		<script crossorigin="anonymous" src="/example-path/bundle.\\w{5}.js" type="module"></script>
+		<script nomodule="" src="/example-path/dom-polyfills.\\w{5}.js"></script>
+		<script nomodule="" src="/example-path/es-polyfills.js"></script>
+		<script nomodule="" defer="defer" src="/example-path/bundle.\\w{5}.legacy.js"></script>
 	</body>
 </html>
 `;
diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js
index cb06ba499..33e2f2f6e 100644
--- a/packages/cli/tests/lib/cli.js
+++ b/packages/cli/tests/lib/cli.js
@@ -1,9 +1,8 @@
 const { join } = require('path');
 const { mkdir } = require('fs').promises;
-const shell = require('shelljs');
 const cmd = require('../../src/commands');
 const { tmpDir } = require('./output');
-const { linkPackage } = require('./utils');
+const { linkPackage, handleOptimize } = require('./utils');
 
 exports.create = async function (template, options) {
 	let dest = await tmpDir();
@@ -14,26 +13,28 @@ exports.create = async function (template, options) {
 	return dest;
 };
 
-exports.build = async function (cwd, options, installNodeModules = false) {
+const build = (exports.build = async function (cwd, options) {
 	const argv = {
 		src: 'src',
 		dest: 'build',
+		babelConfig: '.babelrc',
 		config: 'preact.config.js',
 		prerender: true,
 		prerenderUrls: 'prerender-urls.json',
 		'inline-css': true,
 	};
 
-	if (!installNodeModules) {
-		await mkdir(join(cwd, 'node_modules'), { recursive: true }); // ensure exists, avoid exit()
-		await linkPackage('preact', cwd);
-		await linkPackage('preact-render-to-string', cwd);
-	} else {
-		shell.exec(`npm --prefix ${cwd} i`);
-	}
+	await mkdir(join(cwd, 'node_modules'), { recursive: true }); // ensure exists, avoid exit()
+	await linkPackage('preact', cwd);
+	await linkPackage('preact-render-to-string', cwd);
 
 	let opts = Object.assign({ cwd }, argv, options);
 	return await cmd.build(opts.src, opts);
+});
+
+exports.buildFast = async function (cwd, options) {
+	await handleOptimize(cwd, options && options.config);
+	return await build(cwd, options);
 };
 
 exports.watch = function (cwd, options) {
diff --git a/packages/cli/tests/lib/utils.js b/packages/cli/tests/lib/utils.js
index 99def9402..e23bfc95f 100644
--- a/packages/cli/tests/lib/utils.js
+++ b/packages/cli/tests/lib/utils.js
@@ -71,6 +71,43 @@ async function linkPackage(name, cwd) {
 	} catch {}
 }
 
+/**
+ * Injectable configuration to disable the optimize plugin
+ */
+const disableOptimizePluginConfig = `
+	const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0];
+
+	if (optimizePlugin) {
+		const { plugin } = optimizePlugin;
+		plugin.options.downlevel = false;
+		plugin.options.minify = false;
+	}
+`;
+
+/**
+ * Full config file to disable the optimize plugin
+ */
+const disableOptimizePluginConfigFile = `module.exports = function (config, env, helpers) {
+	${disableOptimizePluginConfig}
+}`;
+
+/**
+ * Disables the slow portions of `optimize-plugin` for
+ * the tests that don't rely on its functionality.
+ */
+async function handleOptimize(cwd, config) {
+	const configFile = `${cwd}/${config || 'preact.config.js'}`;
+	try {
+		let config = await readFile(configFile, 'utf8');
+		// Don't alter config in subsequent runs of same subject
+		if (/optimizePlugin/.test(config)) return;
+		config = config.replace(/}(?![\s\S]*})(?:;?)/m, `${disableOptimizePluginConfig}};`);
+		await writeFile(configFile, config);
+	} catch {
+		await writeFile(configFile, disableOptimizePluginConfigFile);
+	}
+}
+
 expect.extend({
 	toFindMatchingKey(key, matchingKey) {
 		if (matchingKey) {
@@ -120,4 +157,5 @@ module.exports = {
 	waitUntil,
 	sleep,
 	linkPackage,
+	handleOptimize,
 };
diff --git a/packages/cli/tests/service-worker.test.js b/packages/cli/tests/service-worker.test.js
index a8977827c..872c45878 100644
--- a/packages/cli/tests/service-worker.test.js
+++ b/packages/cli/tests/service-worker.test.js
@@ -25,10 +25,7 @@ describe('preact service worker tests', () => {
 
 	beforeAll(async () => {
 		dir = await create('default');
-		await build(dir, {
-			sw: true,
-			esm: true,
-		});
+		await build(dir, { sw: true });
 		dir = join(dir, 'build');
 		server = getServer(dir);
 	});
@@ -86,7 +83,7 @@ describe('preact service worker tests', () => {
 	});
 
 	it('should respond with 200.html when offline', async () => {
-		const swText = await fetch('http://localhost:3000/sw-esm.js').then(res =>
+		const swText = await fetch('http://localhost:3000/sw.js').then(res =>
 			res.text()
 		);
 		// eslint-disable-next-line no-useless-escape
diff --git a/packages/cli/tests/subjects/custom-babelrc/.babelrc b/packages/cli/tests/subjects/custom-babelrc/.babelrc
index 52bd7849e..b8a93b131 100644
--- a/packages/cli/tests/subjects/custom-babelrc/.babelrc
+++ b/packages/cli/tests/subjects/custom-babelrc/.babelrc
@@ -4,7 +4,7 @@
 			"@babel/preset-env",
 			{
 				"bugfixes": true,
-				"targets": "last 1 Chrome versions"
+				"targets": "ie 11"
 			}
 		]
 	]
diff --git a/packages/cli/tests/subjects/custom-webpack/preact.config.js b/packages/cli/tests/subjects/custom-webpack/preact.config.js
index 45baef775..c9c8dfe42 100644
--- a/packages/cli/tests/subjects/custom-webpack/preact.config.js
+++ b/packages/cli/tests/subjects/custom-webpack/preact.config.js
@@ -1,7 +1,10 @@
-module.exports = function (config, env) {
+module.exports = function (config, env, helpers) {
 	if (env.isProd) {
 		config.output.filename = '[name].js';
 	} else {
-		config.output.filename = 'renamed-bundle.js';
+		config.output.filename = (pathData) =>
+			pathData.chunk.name == 'dom-polyfills'
+				? '[name].legacy.js'
+				: 'renamed-bundle.js';
 	}
 };
diff --git a/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/function.js b/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/function.js
index e85964678..e3f55aae4 100644
--- a/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/function.js
+++ b/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/function.js
@@ -1,3 +1,10 @@
-module.exports = function (config) {
+module.exports = function (config, env, helpers) {
 	config.output.filename = '[name].js';
+
+	const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0];
+	if (optimizePlugin) {
+		const { plugin } = optimizePlugin;
+		plugin.options.downlevel = false;
+		plugin.options.minify = false;
+	}
 };
diff --git a/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/object.js b/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/object.js
index f961f78c0..cde83d2b1 100644
--- a/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/object.js
+++ b/packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/object.js
@@ -1,5 +1,12 @@
 module.exports = {
-	webpack(config) {
+	webpack(config, env, helpers) {
 		config.output.filename = '[name].js';
+
+		const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0];
+		if (optimizePlugin) {
+			const { plugin } = optimizePlugin;
+			plugin.options.downlevel = false;
+			plugin.options.minify = false;
+		}
 	},
 };
diff --git a/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/function.js b/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/function.js
index 6971fb4e9..9b8a384d7 100644
--- a/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/function.js
+++ b/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/function.js
@@ -1,3 +1,10 @@
-export default function (config) {
+export default function (config, env, helpers) {
 	config.output.filename = '[name].js';
+
+	const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0];
+	if (optimizePlugin) {
+		const { plugin } = optimizePlugin;
+		plugin.options.downlevel = false;
+		plugin.options.minify = false;
+	}
 }
diff --git a/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/object.js b/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/object.js
index 682582494..1a0f7251e 100644
--- a/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/object.js
+++ b/packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/object.js
@@ -1,5 +1,12 @@
 export default {
-	webpack(config) {
+	webpack(config, env, helpers) {
 		config.output.filename = '[name].js';
+
+		const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0];
+		if (optimizePlugin) {
+			const { plugin } = optimizePlugin;
+			plugin.options.downlevel = false;
+			plugin.options.minify = false;
+		}
 	},
 };
diff --git a/packages/cli/tests/subjects/public-path/preact.config.js b/packages/cli/tests/subjects/public-path/preact.config.js
index e882c91b2..d7ecbd62d 100644
--- a/packages/cli/tests/subjects/public-path/preact.config.js
+++ b/packages/cli/tests/subjects/public-path/preact.config.js
@@ -1,3 +1,3 @@
-module.exports = function (config) {
+module.exports = function (config, env, helpers) {
 	config.output.publicPath = '/example-path/';
 };
diff --git a/packages/cli/tests/watch.test.js b/packages/cli/tests/watch.test.js
index 8fc52eeca..8cecac123 100644
--- a/packages/cli/tests/watch.test.js
+++ b/packages/cli/tests/watch.test.js
@@ -104,17 +104,6 @@ describe('preact', () => {
 			await server.stop();
 		});
 
-		it('--esm', async () => {
-			let app = await subject('minimal');
-
-			server = await watch(app, { port: 8089, esm: true });
-			let bundle = await fetch('http://127.0.0.1:8089/bundle.esm.js').then(
-				res => res.text()
-			);
-			expect(bundle).toMatch('Minimal App');
-			await server.stop();
-		});
-
 		it('--sw', async () => {
 			let app = await subject('minimal');