feat: webpack v5 (#1645)

* feat: webpack-v5

* test: Update tests

* docs: Updating docs to reflect changes

* chore: Removing optimize-plugin local patch

Author: rschristian

.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.

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
 **/tests/output
+**/tests/subjects/*/preact.config.js
 **/*.d.ts

README.md

@@ -106,15 +106,14 @@ 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
 
     --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
@@ -139,7 +138,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)
@@ -192,25 +190,25 @@ 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:
 
 > `package.json`
 
 ```json
 {
-	"browserslist": ["> 0.25%", "IE >= 9"]
+	"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"]
 }
 ```
 
 #### Babel
 
 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
 
@@ -402,9 +400,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

packages/cli/package.json

@@ -35,78 +35,69 @@
   },
   "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",
     "@babel/preset-typescript": "^7.13.0",
     "@preact/async-loader": "^3.0.1",
     "@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.0",
     "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",
-    "typescript": "~4.6.4",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.0",
+    "typescript": "^4.6.4",
     "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",
@@ -120,27 +111,28 @@
     "@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"
   },
   "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"
   },
   "peerDependenciesMeta": {
     "less-loader": {

packages/cli/src/index.js

@@ -37,7 +37,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)
@@ -89,7 +88,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')

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'),

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'
 	);
 }
 

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__) {

packages/cli/src/lib/webpack/push-manifest.js

@@ -1,37 +1,28 @@
-const webpack = require('webpack');
+const { Compilation, sources } = require('webpack');
 const createLoadManifest = require('./create-load-manifest');
 
 module.exports = class PushManifestPlugin {
 	constructor(isProd) {
 		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_REPORT,
+				},
+				() => {
+					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)
+					);
+				}
+			);
+		});
 	}
 };