@nitro/webpack 10.0.3 → 11.0.0-beta.1

package/lib/utils.js

@@ -16,15 +16,18 @@ function getEnrichedConfig(rule, config) {
 }
 
 // load optional package
-function getOptionalPackage(x) {
-	let mod;
-	try {
-		mod = require(x);
-	} catch (error) {
-		mod = null;
-	}
-	return mod;
-}
+function getOptionalPackage(x) {
+	let mod;
+	try {
+		mod = require(x);
+	} catch (error) {
+		mod = null;
+	}
+	if (!mod) {
+		return null;
+	}
+	return mod.default ? mod.default : mod;
+}
 
 module.exports = {
 	getEnrichedConfig,

package/lib/webpack-rules.js

@@ -0,0 +1,124 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const typescript = require('typescript');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const utils = require('./utils');
+
+function resolveBabelConfigFile(context, ruleOptions) {
+	if (ruleOptions && ruleOptions.babelConfigFile) {
+		return path.resolve(context, ruleOptions.babelConfigFile);
+	}
+
+	const candidates = ['babel.config.js', '.babelrc', '.babelrc.js', '.babelrc.json'];
+	for (const candidate of candidates) {
+		const candidatePath = path.resolve(context, candidate);
+		if (fs.existsSync(candidatePath)) {
+			return candidatePath;
+		}
+	}
+
+	return null;
+}
+
+function resolveTsConfigFile(context, ruleOptions) {
+	if (ruleOptions && ruleOptions.tsConfigFile) {
+		return path.resolve(context, ruleOptions.tsConfigFile);
+	}
+
+	return typescript.findConfigFile(context, fs.existsSync);
+}
+
+function getRuleOptions(ruleOptions) {
+	return ruleOptions && typeof ruleOptions === 'object' ? ruleOptions : null;
+}
+
+function ensureResolveExtensions(webpackConfig, extensions, { prepend }) {
+	if (!webpackConfig.resolve) {
+		webpackConfig.resolve = {};
+	}
+	if (!Array.isArray(webpackConfig.resolve.extensions)) {
+		webpackConfig.resolve.extensions = ['.js', '.json'];
+	}
+	const target = webpackConfig.resolve.extensions;
+	const missing = extensions.filter((ext) => !target.includes(ext));
+	if (missing.length === 0) {
+		return;
+	}
+	if (prepend) {
+		target.unshift(...missing);
+	} else {
+		target.push(...missing);
+	}
+}
+
+function getBabelLoaderOptions(context, ruleOptions) {
+	const babelConfigFile = resolveBabelConfigFile(context, ruleOptions);
+	const babelLoaderOptions = {
+		cacheDirectory: true,
+		compact: true,
+	};
+	if (babelConfigFile) {
+		babelLoaderOptions.configFile = babelConfigFile;
+	}
+	return babelLoaderOptions;
+}
+
+function addJSConfig(webpackConfig, context, ruleOptions) {
+	const babelLoaderOptions = getBabelLoaderOptions(context, ruleOptions);
+	const scriptRuleJs = {
+		test: /\.[cm]?jsx?$/,
+		exclude: [/[/\\\\]node_modules[/\\\\]/],
+		use: [
+			{
+				loader: require.resolve('babel-loader'),
+				options: babelLoaderOptions,
+			},
+		],
+	};
+	webpackConfig.module.rules.push(utils.getEnrichedConfig(scriptRuleJs, getRuleOptions(ruleOptions)));
+	ensureResolveExtensions(webpackConfig, ['.js', '.jsx', '.mjs', '.cjs'], { prepend: true });
+}
+
+function addTsConfig(webpackConfig, context, ruleOptions, { isProduction }) {
+	const babelLoaderOptions = getBabelLoaderOptions(context, ruleOptions);
+	const scriptRuleTs = {
+		test: /\.[cm]?tsx?$/,
+		exclude: [/[/\\\\]node_modules[/\\\\]/],
+		use: [
+			{
+				loader: require.resolve('babel-loader'),
+				options: babelLoaderOptions,
+			},
+			{
+				loader: require.resolve('ts-loader'),
+				options: {
+					transpileOnly: true,
+				},
+			},
+		],
+	};
+	webpackConfig.module.rules.push(utils.getEnrichedConfig(scriptRuleTs, getRuleOptions(ruleOptions)));
+	ensureResolveExtensions(webpackConfig, ['.ts', '.tsx', '.mts', '.cts'], { prepend: true });
+
+	const tsConfigFile = resolveTsConfigFile(context, ruleOptions);
+	if (tsConfigFile) {
+		const forkCheckerOptions = {
+			async: !isProduction,
+			typescript: {
+				diagnosticOptions: {
+					semantic: true,
+					syntactic: true,
+				},
+				configFile: tsConfigFile,
+			},
+		};
+		webpackConfig.plugins.push(new ForkTsCheckerWebpackPlugin(forkCheckerOptions));
+	}
+}
+
+module.exports = {
+	addJSConfig,
+	addTsConfig,
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nitro/webpack",
-  "version": "10.0.3",
+  "version": "11.0.0-beta.1",
   "description": "nitro webpack",
   "license": "MIT",
   "author": "The Nitro Team",
   "engines": {
-    "node": ">=20.18.1 <21",
-    "npm": ">=10.8.2 <11"
+    "node": ">=22.11.0 <25",
+    "npm": ">=10.9.0 <12"
   },
   "scripts": {
     "lint": "eslint .",
@@ -15,52 +15,54 @@
   },
   "files": [
     "lib",
-    "plugins",
     "webpack-config"
   ],
   "keywords": [
     "frontend",
     "nitro"
   ],
+  "peerDependencies": {
+    "@nitro/app": ">=11.0.0-beta.1",
+    "webpack": "^5"
+  },
   "dependencies": {
-    "@babel/core": "7.28.5",
-    "@babel/preset-env": "7.28.5",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.0",
     "@babel/preset-react": "7.28.5",
-    "@babel/plugin-proposal-decorators": "7.28.0",
-    "@babel/plugin-transform-class-properties": "7.27.1",
-    "autoprefixer": "10.4.22",
+    "@babel/plugin-proposal-decorators": "7.29.0",
+    "@babel/plugin-transform-class-properties": "7.28.6",
+    "autoprefixer": "10.4.24",
+    "babel-loader": "10.0.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
-    "css-loader": "5.2.7",
+    "css-loader": "7.1.3",
     "cssnano": "7.1.2",
-    "file-loader": "6.2.0",
+    "image-minimizer-webpack-plugin": "4.1.4",
+    "fork-ts-checker-webpack-plugin": "9.1.0",
     "handlebars-loader": "1.7.3",
-    "imagemin": "7.0.1",
-    "img-loader": "4.0.0",
-    "js-config-webpack-plugin": "2.0.3",
-    "mini-css-extract-plugin": "1.6.2",
+    "imagemin": "9.0.1",
+    "mini-css-extract-plugin": "2.10.0",
     "postcss": "8.5.6",
-    "postcss-loader": "4.3.0",
+    "postcss-loader": "8.2.0",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.94.2",
-    "sass-loader": "10.5.2",
-    "svgo": "3.3.2",
-    "ts-config-webpack-plugin": "2.0.3",
+    "sass": "1.97.3",
+    "sass-loader": "16.0.7",
+    "thread-loader": "4.0.4",
+    "ts-loader": "9.5.4",
     "typescript": "5.9.3",
-    "url-loader": "4.1.1",
-    "webpack": "4.47.0",
     "webpackbar": "7.0.0",
-    "webpack-bundle-analyzer": "4.10.2"
+    "webpack-bundle-analyzer": "5.2.0"
   },
   "optionalDependencies": {
-    "imagemin-mozjpeg": "9.0.0",
+    "imagemin-mozjpeg": "10.0.0",
     "imagemin-optipng": "8.0.0",
-    "imagemin-pngquant": "9.0.2",
-    "imagemin-svgo": "9.0.0"
+    "imagemin-pngquant": "10.0.0",
+    "imagemin-svgo": "11.0.1"
   },
   "devDependencies": {
     "@merkle-open/eslint-config": "4.0.1",
     "eslint": "8.57.1",
-    "eslint-plugin-import": "2.32.0"
+    "eslint-plugin-import": "2.32.0",
+    "webpack": "5.105.2"
   },
   "publishConfig": {
     "access": "public"

package/readme.md

@@ -4,16 +4,15 @@
 
 # Nitro Webpack
 
-Configurable and easy to use webpack 4 config for nitro projects.
+Configurable and easy to use webpack 5 config for nitro projects.
 
 ## Usage
 
 ```
 const options = {
     rules: {
-        js: true,
-        ts: false,
-        scss: true,
+        script: true,
+        style: true,
         hbs: true,
         woff: true,
         font: false,
@@ -22,8 +21,8 @@ const options = {
     features: {
         banner: true,
         bundleAnalyzer: false,
+        imageMinimizer: true,
         theme: false,
-        dynamicAlias: false,
     },
 };
 const webpackConfig = require('@nitro/webpack/webpack-config/webpack.config.dev')(options);
@@ -37,27 +36,20 @@ module.exports = webpackConfig;
 
 No loader rule is enabled by default. Activate following prepared rules you need in `options.rules`
 
-#### `options.rules.js`
+#### `options.rules.script`
 
 - Type: boolean || object
 - default: false
-- file types: js, jsx, mjs
+- file types: js, jsx, mjs, cjs (and optional ts, tsx, mts, cts)
 
 Config:
 
-- `true` or `{}` activates JavaScript support
+- `true` or `{}` activates JavaScript support (via Babel)
+- `{ typescript: true }` adds TypeScript support
+- `{ babelConfigFile: 'path/to/babel.config.js' }` will be used as Babel config (default: auto-detect)
+- `{ tsConfigFile: 'path/to/tsconfig.json' }` is used for type-checking with ForkTsCheckerWebpackPlugin (default: auto-detect)
 
-#### `options.rules.ts`
-
-- Type: boolean
-- default: false
-- file types: ts, tsx
-
-Config:
-
-- `true` will activate TypeScript support
-
-#### `options.rules.scss`
+#### `options.rules.style`
 
 - Type: boolean || object
 - default: false
@@ -65,10 +57,9 @@ Config:
 
 Config:
 
-- `true` or `{}` will activate scss support
+- `true` or `{}` will activate css & scss support
 - `{ publicPath: '../' }` provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build)
-- `{ implementation: require('node-sass') }` gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project)
-- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/) or ['node-sass'](https://github.com/sass/node-sass/#options) implementation (e.g. ignore some deprecations for dart-sass with `silenceDeprecations: [...]`)
+- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/)
 
 #### `options.rules.hbs`
 
@@ -141,6 +132,13 @@ Enable some additional features
 
 `true` will add the bundleAnalyser plugin and opens a browser window with the stats
 
+#### `options.features.imageMinimizer`
+
+- Type: boolean
+- default: true
+
+`false` will disable image minifaction functionality
+
 #### `options.features.theme`
 
 - Type: string || false
@@ -153,21 +151,6 @@ A string will activate theming support:
 
 It makes sense to use a dynamic value e.g. an environment variable, as shown in the example configuration.
 
-#### `options.features.dynamicAlias`
-
-- Type: object || false
-- default: false
-
-A proper configured dynamicAlias feature will activate the DynamicAliasResolverPlugin
-which can change import paths in source files dynamically on compile time as desired.
-
-Properties:
-
-- `options.features.dynamicAlias.search` (string || RegExp)
-  search term to be replaced (e.g. '/theme/light')
-- `options.features.dynamicAlias.replace` (string)
-  string as replacement (e.g. `/theme/${theme}`)
-
 ## Extending Configuration
 
 ### Code Splitting

package/webpack-config/webpack.config.dev.js

@@ -1,26 +1,19 @@
 const path = require('path');
 const fs = require('fs');
-const crypto = require('crypto');
 const webpack = require('webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
-const DynamicAliasResolverPlugin = require('../plugins/dynamicAliasResolver');
 const utils = require('../lib/utils');
+const webpackRules = require('../lib/webpack-rules');
 
 const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
 const appDirectory = fs.realpathSync(process.cwd());
 
-// hack: OpenSSL 3 does not support md4 anymore, but legacy webpack 4 hardcoded it: https://github.com/webpack/webpack/issues/13572
-const crypto_orig_createHash = crypto.createHash;
-crypto.createHash = algorithm => crypto_orig_createHash(algorithm === 'md4' ? 'sha256' : algorithm);
-
 module.exports = (options = { rules: {}, features: {} }) => {
 	const webpackConfig = {
 		mode: 'development',
-		devtool: 'eval-source-map',
+		devtool: 'source-map',
 		context: appDirectory,
 		entry: {
 			ui: ['./src/ui', hotMiddlewareScript],
@@ -29,7 +22,7 @@ module.exports = (options = { rules: {}, features: {} }) => {
 		output: {
 			path: path.resolve(appDirectory, 'public', 'assets'),
 			filename: 'js/[name].js',
-			chunkFilename: 'js/[name]-[hash:7].js',
+			chunkFilename: 'js/[name]-[contenthash:7].js',
 			publicPath: '/assets/',
 			pathinfo: false,
 		},
@@ -52,47 +45,43 @@ module.exports = (options = { rules: {}, features: {} }) => {
 			],
 		},
 		optimization: {
-			noEmitOnErrors: true,
+			emitOnErrors: false,
+			moduleIds: 'deterministic',
+			chunkIds: 'deterministic',
+			runtimeChunk: 'single',
 			splitChunks: {
-				name: true,
-				automaticNameDelimiter: '/',
+				chunks: 'all',
+				minSize: 3000,
 				cacheGroups: {
-					// allow dynamic imports for node_modules also
-					dynamic: {
-						minSize: 3000,
-						chunks: 'async',
-						priority: 0,
-					},
-					// extract js node_modules to vendors file
+					default: false,
+					defaultVendors: false,
 					vendors: {
 						test: /[\\/]node_modules[\\/].*\.(js|jsx|mjs|ts|tsx)$/,
-						// use fix filename for usage in view
-						filename: 'js/vendors.js',
-						// Exclude proto dependencies going into vendors
-						chunks: (chunk) => chunk.name !== 'proto',
-						priority: -10,
+						chunks: (chunk) => chunk.canBeInitial() && chunk.name && chunk.name !== 'proto',
+						name: 'vendors',
 						enforce: true,
 					},
 				},
 			},
 		},
 		stats: {
-			all: undefined,
+			preset: 'errors-warnings',
 			assets: false,
 			children: false,
 			chunks: false,
 			modules: false,
 			colors: true,
-			depth: false,
 			entrypoints: false,
 			errors: true,
 			errorDetails: false,
 			hash: false,
+			builtAt: false,
+			timings: false,
 			performance: true,
 			warnings: true,
 		},
 		infrastructureLogging: {
-			level: 'warn'
+			level: 'warn',
 		}
 	};
 	const theme = options.features.theme ? options.features.theme : false;
@@ -103,21 +92,20 @@ module.exports = (options = { rules: {}, features: {} }) => {
 		webpackConfig.output.publicPath = `${webpackConfig.output.publicPath}${theme}/`;
 	}
 
-	// js
-	if (options.rules.js) {
-		webpackConfig.plugins.push(new JsConfigWebpackPlugin({ babelConfigFile: './babel.config.js' }));
-	}
-
-	// typescript
-	if (options.rules.ts) {
-		webpackConfig.plugins.push(new TsConfigWebpackPlugin());
+	// scripts (js/ts via babel)
+	if (options.rules.script) {
+		const scriptOptions = typeof options.rules.script === 'object' ? options.rules.script : null;
+		webpackRules.addJSConfig(webpackConfig, appDirectory, scriptOptions);
+		if (scriptOptions && scriptOptions.typescript) {
+			webpackRules.addTsConfig(webpackConfig, appDirectory, scriptOptions, { isProduction: false });
+		}
 	}
 
 	// css & scss
-	if (options.rules.scss) {
+	if (options.rules.style) {
 		const scssLoaderOptions = {
-			...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }),
-			...(options.rules.scss.sassOptions && { sassOptions: options.rules.scss.sassOptions }),
+			sourceMap: true,
+			...(options.rules.style.sassOptions && { sassOptions: options.rules.style.sassOptions }),
 		};
 		webpackConfig.module.rules.push({
 			test: /\.s?css$/,
@@ -129,11 +117,13 @@ module.exports = (options = { rules: {}, features: {} }) => {
 					loader: require.resolve('css-loader'),
 					options: {
 						importLoaders: 2,
+						sourceMap: true,
 					},
 				},
 				{
 					loader: require.resolve('postcss-loader'),
 					options: {
+						sourceMap: true,
 						postcssOptions: () => {
 							return {
 								plugins: [
@@ -151,6 +141,9 @@ module.exports = (options = { rules: {}, features: {} }) => {
 				},
 				{
 					loader: require.resolve('resolve-url-loader'),
+					options: {
+						sourceMap: true,
+					},
 				},
 				{
 					loader: require.resolve('sass-loader'),
@@ -163,12 +156,6 @@ module.exports = (options = { rules: {}, features: {} }) => {
 			new MiniCssExtractPlugin({
 				filename: 'css/[name].css',
 			}),
-			// we need SourceMapDevToolPlugin to make sourcemaps work
-			// with MiniCSSExtractPlugin hmr mode
-			// related: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
-			new webpack.SourceMapDevToolPlugin({
-				filename: '[file].map',
-			})
 		);
 	}
 
@@ -195,11 +182,9 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	if (options.rules.woff) {
 		const woffRule = {
 			test: /.(woff(2)?)(\?[a-z0-9]+)?$/,
-			use: {
-				loader: require.resolve('file-loader'),
-				options: {
-					name: 'media/fonts/[name]-[hash:7].[ext]',
-				},
+			type: 'asset/resource',
+			generator: {
+				filename: 'media/fonts/[name]-[contenthash:7].[ext]',
 			},
 		};
 		webpackConfig.module.rules.push(utils.getEnrichedConfig(woffRule, options.rules.woff));
@@ -209,13 +194,15 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	if (options.rules.font) {
 		const fontRule = {
 			test: /\.(eot|svg|ttf|woff|woff2)([?#]+[A-Za-z0-9-_]*)*$/,
-			use: {
-				loader: require.resolve('url-loader'),
-				options: {
-					limit: 2 * 1028,
-					name: 'media/font/[name]-[hash:7].[ext]',
+			type: 'asset',
+			parser: {
+				dataUrlCondition: {
+					maxSize: 2 * 1028,
 				},
 			},
+			generator: {
+				filename: 'media/font/[name]-[contenthash:7].[ext]',
+			},
 		};
 		webpackConfig.module.rules.push(utils.getEnrichedConfig(fontRule, options.rules.font));
 	}
@@ -224,8 +211,14 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	if (options.rules.image) {
 		const imageRule = {
 			test: /\.(png|jpg|gif|svg)$/,
-			use: {
-				loader: require.resolve('file-loader'),
+			type: 'asset',
+			parser: {
+				dataUrlCondition: {
+					maxSize: 3 * 1028,
+				},
+			},
+			generator: {
+				filename: 'media/[ext]/[name]-[contenthash:7].[ext]',
 			},
 		};
 		webpackConfig.module.rules.push(utils.getEnrichedConfig(imageRule, options.rules.image));
@@ -236,15 +229,6 @@ module.exports = (options = { rules: {}, features: {} }) => {
 		webpackConfig.plugins.push(new BundleAnalyzerPlugin());
 	}
 
-	// feature dynamic alias
-	if (
-		options.features.dynamicAlias &&
-		options.features.dynamicAlias.search &&
-		options.features.dynamicAlias.replace
-	) {
-		webpackConfig.resolve.plugins = [new DynamicAliasResolverPlugin(options.features.dynamicAlias)];
-	}
-
 	return webpackConfig;
 };
 module.exports.hotMiddlewareScript = hotMiddlewareScript;

package/webpack-config/webpack.config.prod.js

@@ -1,318 +1,311 @@
-const path = require('path');
-const fs = require('fs');
-const crypto = require('crypto');
-const webpack = require('webpack');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
-const WebpackBar = require('webpackbar');
-const DynamicAliasResolverPlugin = require('../plugins/dynamicAliasResolver');
-const utils = require('../lib/utils');
-
-// hack: OpenSSL 3 does not support md4 anymore, but legacy webpack 4 hardcoded it: https://github.com/webpack/webpack/issues/13572
-const crypto_orig_createHash = crypto.createHash;
-crypto.createHash = algorithm => crypto_orig_createHash(algorithm === 'md4' ? 'sha256' : algorithm);
-
-const appDirectory = fs.realpathSync(process.cwd());
-
-const bannerData = {
-	date: new Date().toISOString().slice(0, 19),
-	pkg: require(`${appDirectory}/package.json`),
-};
-
-const banner = `${bannerData.pkg.name}
-@version v${bannerData.pkg.version}
-@date ${bannerData.date}`;
-
-module.exports = (options = { rules: {}, features: {} }) => {
-	const webpackConfig = {
-		mode: 'production',
-		devtool: 'hidden-source-map',
-		context: appDirectory,
-		entry: {
-			ui: './src/ui',
-			proto: './src/proto',
-		},
-		output: {
-			path: path.resolve(appDirectory, 'public', 'assets'),
-			filename: 'js/[name].min.js',
-			chunkFilename: 'js/[name]-[contenthash:7].min.js',
-			publicPath: '/assets/',
-		},
-		resolve: {
-			symlinks: false,
-		},
-		module: {
-			rules: [],
-		},
-		plugins: [new CaseSensitivePathsPlugin({ debug: false }), new WebpackBar()],
-		optimization: {
-			splitChunks: {
-				name: true,
-				automaticNameDelimiter: '/',
-				cacheGroups: {
-					// allow dynamic imports for node_modules also
-					dynamic: {
-						minSize: 3000,
-						chunks: 'async',
-						priority: 0,
-					},
-					// extract js node_modules to vendors file
-					vendors: {
-						test: /[\\/]node_modules[\\/].*\.(js|jsx|mjs|ts|tsx)$/,
-						// use fix filename for usage in view
-						filename: 'js/vendors.min.js',
-						// Exclude proto dependencies going into vendors
-						chunks: (chunk) => chunk.name !== 'proto',
-						priority: -10,
-						enforce: true,
-					},
-				},
-			},
-		},
-		stats: {
-			all: undefined,
-			assets: true,
-			children: false,
-			chunks: false,
-			modules: false,
-			colors: true,
-			depth: false,
-			entrypoints: false,
-			errors: true,
-			errorDetails: true,
-			hash: false,
-			performance: true,
-			warnings: false,
-		},
-	};
-	const theme = options.features.theme ? options.features.theme : false;
-	if (theme) {
-		webpackConfig.entry.ui = `./src/ui.${theme}`;
-		webpackConfig.output.path = path.resolve(webpackConfig.output.path, theme);
-		webpackConfig.output.publicPath = `${webpackConfig.output.publicPath}${theme}/`;
-	}
-
-	// js
-	if (options.rules.js) {
-		webpackConfig.plugins.push(new JsConfigWebpackPlugin({ babelConfigFile: './babel.config.js' }));
-	}
-
-	// typescript
-	if (options.rules.ts) {
-		webpackConfig.plugins.push(new TsConfigWebpackPlugin());
-	}
-
-	// css & scss
-	if (options.rules.scss) {
-		const scssMiniCSSExtractOptions = {
-			...(options.rules.scss.publicPath && { publicPath: options.rules.scss.publicPath })
-		};
-		const scssLoaderOptions = {
-			...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }),
-			...(options.rules.scss.sassOptions && { sassOptions: options.rules.scss.sassOptions }),
-		};
-		webpackConfig.module.rules.push({
-			test: /\.s?css$/,
-			use: [
-				{
-					loader: MiniCssExtractPlugin.loader,
-					options: scssMiniCSSExtractOptions,
-				},
-				{
-					loader: require.resolve('css-loader'),
-					options: {
-						importLoaders: 2,
-					},
-				},
-				{
-					loader: require.resolve('postcss-loader'),
-					options: {
-						postcssOptions: () => {
-							return {
-								plugins: [
-									require('autoprefixer')({
-										// @see autoprefixer options: https://github.com/postcss/autoprefixer#options
-										// flexbox: 'no-2009' will add prefixes only for final and IE versions of specification.
-										flexbox: 'no-2009',
-										// grid: 'autoplace': enable autoprefixer grid translations and include autoplacement support.
-										// not enabled - use `/* autoprefixer grid: autoplace */` in your css file
-									}),
-									require('cssnano'),
-								],
-							};
-						},
-					},
-				},
-				{
-					loader: require.resolve('resolve-url-loader'),
-				},
-				{
-					loader: require.resolve('sass-loader'),
-					options: scssLoaderOptions,
-				},
-			],
-		});
-
-		webpackConfig.plugins.push(
-			new MiniCssExtractPlugin({
-				filename: 'css/[name].min.css',
-				chunkFilename: 'css/[name]-[contenthash:7].min.css',
-			}),
-		);
-	}
-
-	// handlebars precompiled templates
-	if (options.rules.hbs) {
-		const hbsRule = {
-			test: /\.hbs$/,
-			use: {
-				loader: require.resolve('handlebars-loader'),
-				// options: {
-				// 	helperDirs: [
-				// 		path.resolve(__dirname, '../../app/templating/hbs/helpers'),
-				// 	],
-				// 	knownHelpers: [],
-				// 	runtime: '',
-				// 	partialDirs: ''
-				// },
-			},
-		};
-		webpackConfig.module.rules.push(utils.getEnrichedConfig(hbsRule, options.rules.hbs));
-	}
-
-	// woff fonts (for example, in CSS files)
-	if (options.rules.woff) {
-		const woffRule = {
-			test: /.(woff(2)?)(\?[a-z0-9]+)?$/,
-			use: {
-				loader: require.resolve('file-loader'),
-				options: {
-					name: 'media/fonts/[name]-[hash:7].[ext]',
-				},
-			},
-		};
-		webpackConfig.module.rules.push(utils.getEnrichedConfig(woffRule, options.rules.woff));
-	}
-
-	// different font types (legacy - eg. used in older library css)
-	if (options.rules.font) {
-		const fontRule = {
-			test: /\.(eot|svg|ttf|woff|woff2)([?#]+[A-Za-z0-9-_]*)*$/,
-			use: {
-				loader: require.resolve('url-loader'),
-				options: {
-					limit: 2 * 1028,
-					name: 'media/font/[name]-[hash:7].[ext]',
-				},
-			},
-		};
-		webpackConfig.module.rules.push(utils.getEnrichedConfig(fontRule, options.rules.font));
-	}
-
-	// images
-	if (options.rules.image) {
-
-		const imageminMozjpeg = utils.getOptionalPackage('imagemin-mozjpeg');
-		const imageminOptipng = utils.getOptionalPackage('imagemin-optipng');
-		const imageminPngquant = utils.getOptionalPackage('imagemin-pngquant');
-		const imageminSvgo = utils.getOptionalPackage('imagemin-svgo');
-
-		// console.log('imagemin-mozjpeg: ', imageminMozjpeg ? 'installed' : 'NOT');
-		// console.log('imagemin-optipng: ', imageminOptipng ? 'installed' : 'NOT');
-		// console.log('imagemin-pngquant: ', imageminPngquant ? 'installed' : 'NOT');
-		// console.log('imagemin-svgo: ', imageminSvgo ? 'installed' : 'NOT');
-
-		// image loader & minification
-		const imageMinificationRule = {
-			test: /\.(png|jpg|svg)$/,
-			// Specify enforce: 'pre' to apply the loader before url-loader
-			enforce: 'pre',
-			use: {
-				loader: require.resolve('img-loader'),
-				options: {
-					plugins: [],
-				},
-			},
-		};
-
-		if (imageminMozjpeg) {
-			imageMinificationRule.use.options.plugins.push(
-				imageminMozjpeg({
-					quality: 75,
-					progressive: true,
-				})
-			);
-		}
-		if (imageminOptipng) {
-			imageMinificationRule.use.options.plugins.push(
-				imageminOptipng({
-					optimizationLevel: 7,
-				})
-			);
-		}
-		if (imageminPngquant) {
-			imageMinificationRule.use.options.plugins.push(
-				imageminPngquant({
-					// floyd: 0.5,
-					// speed: 2
-				})
-			);
-		}
-		if (imageminSvgo) {
-			imageMinificationRule.use.options.plugins.push(
-				imageminSvgo({
-					plugins: [
-						{
-							name: 'preset-default',
-							params: {
-								overrides: {
-									removeViewBox: false,
-								},
-							},
-						},
-					],
-				})
-			);
-		}
-
-		// url loader for images (for example, in CSS files)
-		// inlines assets below a limit
-		const imageRule = {
-			test: /\.(png|jpg|gif|svg)$/,
-			use: {
-				loader: require.resolve('url-loader'),
-				options: {
-					limit: 3 * 1028,
-					name: 'media/[ext]/[name]-[hash:7].[ext]',
-				},
-			},
-		};
-
-		webpackConfig.module.rules.push(imageMinificationRule, utils.getEnrichedConfig(imageRule, options.rules.image));
-	}
-
-	// feature banner (enabled by default)
-	if (!options.features.banner === false) {
-		webpackConfig.plugins.push(new webpack.BannerPlugin({ banner }));
-	}
-
-	// feature bundle analyzer
-	if (options.features.bundleAnalyzer) {
-		webpackConfig.plugins.push(new BundleAnalyzerPlugin());
-	}
-
-	// feature dynamic alias
-	if (
-		options.features.dynamicAlias &&
-		options.features.dynamicAlias.search &&
-		options.features.dynamicAlias.replace
-	) {
-		webpackConfig.resolve.plugins = [new DynamicAliasResolverPlugin(options.features.dynamicAlias)];
-	}
-
-	return webpackConfig;
-};
-module.exports.appDirectory = appDirectory;
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const WebpackBar = require('webpackbar');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const utils = require('../lib/utils');
+const webpackRules = require('../lib/webpack-rules');
+
+const appDirectory = fs.realpathSync(process.cwd());
+
+const bannerData = {
+	date: new Date().toISOString().slice(0, 19),
+	pkg: require(`${appDirectory}/package.json`),
+};
+
+const banner = `${bannerData.pkg.name}
+@version v${bannerData.pkg.version}
+@date ${bannerData.date}`;
+
+module.exports = (options = { rules: {}, features: {} }) => {
+	const imageMinimizerPlugins = [];
+	const imageminMozjpeg = utils.getOptionalPackage('imagemin-mozjpeg');
+	const imageminOptipng = utils.getOptionalPackage('imagemin-optipng');
+	const imageminPngquant = utils.getOptionalPackage('imagemin-pngquant');
+	const imageminSvgo = utils.getOptionalPackage('imagemin-svgo');
+
+	if (imageminMozjpeg) {
+		imageMinimizerPlugins.push(
+			[
+				'mozjpeg',
+				{
+					quality: 75,
+					progressive: true,
+				},
+			]
+		);
+	}
+	if (imageminOptipng) {
+		imageMinimizerPlugins.push(
+			[
+				'optipng',
+				{
+					optimizationLevel: 7,
+				},
+			]
+		);
+	}
+	if (imageminPngquant) {
+		imageMinimizerPlugins.push('pngquant');
+	}
+	if (imageminSvgo) {
+		imageMinimizerPlugins.push(
+			[
+				'svgo',
+				{
+					plugins: [
+						{
+							name: 'preset-default',
+							params: {
+								overrides: {
+									removeViewBox: false,
+								},
+							},
+						},
+					],
+				},
+			]
+		);
+	}
+
+	const minimizerPlugins = [new TerserPlugin({ extractComments: false })];
+	if (!(options.features.imageMinimizer === false || imageMinimizerPlugins.length === 0)) {
+		minimizerPlugins.push(
+			new ImageMinimizerPlugin({
+				minimizer: {
+					implementation: ImageMinimizerPlugin.imageminMinify,
+					options: {
+						plugins: imageMinimizerPlugins,
+					},
+				},
+			})
+		);
+	}
+
+	const webpackConfig = {
+		mode: 'production',
+		devtool: 'hidden-source-map',
+		context: appDirectory,
+		entry: {
+			ui: './src/ui',
+			proto: './src/proto',
+		},
+		output: {
+			path: path.resolve(appDirectory, 'public', 'assets'),
+			filename: 'js/[name].min.js',
+			chunkFilename: 'js/chunks/[name]-[contenthash:7].min.js',
+			publicPath: '/assets/',
+		},
+		resolve: {
+			symlinks: false,
+		},
+		module: {
+			rules: [],
+		},
+		plugins: [new CaseSensitivePathsPlugin({ debug: false }), new WebpackBar()],
+		optimization: {
+			moduleIds: 'deterministic',
+			chunkIds: 'deterministic',
+			runtimeChunk: false,
+			splitChunks: {
+				chunks: 'all',
+				minSize: 3000,
+				cacheGroups: {
+					default: false,
+					defaultVendors: false,
+					vendors: {
+						test: /[\\/]node_modules[\\/].*\.(js|jsx|mjs|ts|tsx)$/,
+						chunks: (chunk) => chunk.canBeInitial() && chunk.name && chunk.name !== 'proto',
+						name: 'vendors',
+						enforce: true,
+					},
+				},
+			},
+			minimizer: minimizerPlugins,
+		},
+		stats: {
+			preset: 'errors-warnings',
+			assets: true,
+			assetsSort: 'size',
+			children: false,
+			chunks: false,
+			modules: false,
+			colors: true,
+			entrypoints: true,
+			errors: true,
+			errorDetails: true,
+			hash: false,
+			builtAt: false,
+			timings: true,
+			performance: true,
+			warnings: true,
+		},
+		performance: {
+			hints: 'warning',
+			maxEntrypointSize: 760 * 1024,
+			maxAssetSize: 380 * 1024,
+		},
+	};
+	const theme = options.features.theme ? options.features.theme : false;
+	if (theme) {
+		webpackConfig.entry.ui = `./src/ui.${theme}`;
+		webpackConfig.output.path = path.resolve(webpackConfig.output.path, theme);
+		webpackConfig.output.publicPath = `${webpackConfig.output.publicPath}${theme}/`;
+	}
+
+	// scripts (js/ts via babel)
+	if (options.rules.script) {
+		const scriptOptions = typeof options.rules.script === 'object' ? options.rules.script : null;
+		webpackRules.addJSConfig(webpackConfig, appDirectory, scriptOptions);
+		if (scriptOptions && scriptOptions.typescript) {
+			webpackRules.addTsConfig(webpackConfig, appDirectory, scriptOptions, { isProduction: true });
+		}
+	}
+
+	// css & scss
+	if (options.rules.style) {
+		const scssMiniCSSExtractOptions = {
+			...(options.rules.style.publicPath && { publicPath: options.rules.style.publicPath })
+		};
+		const scssLoaderOptions = {
+			sourceMap: true,
+			...(options.rules.style.sassOptions && { sassOptions: options.rules.style.sassOptions }),
+		};
+		webpackConfig.module.rules.push({
+			test: /\.s?css$/,
+			use: [
+				{
+					loader: MiniCssExtractPlugin.loader,
+					options: scssMiniCSSExtractOptions,
+				},
+				{
+					loader: require.resolve('css-loader'),
+					options: {
+						importLoaders: 2,
+						sourceMap: true,
+					},
+				},
+				{
+					loader: require.resolve('postcss-loader'),
+					options: {
+						sourceMap: true,
+						postcssOptions: () => {
+							return {
+								plugins: [
+									require('autoprefixer')({
+										// @see autoprefixer options: https://github.com/postcss/autoprefixer#options
+										// flexbox: 'no-2009' will add prefixes only for final and IE versions of specification.
+										flexbox: 'no-2009',
+										// grid: 'autoplace': enable autoprefixer grid translations and include autoplacement support.
+										// not enabled - use `/* autoprefixer grid: autoplace */` in your css file
+									}),
+									require('cssnano'),
+								],
+							};
+						},
+					},
+				},
+				{
+					loader: require.resolve('resolve-url-loader'),
+					options: {
+						sourceMap: true,
+					},
+				},
+				{
+					loader: require.resolve('sass-loader'),
+					options: scssLoaderOptions,
+				},
+			],
+		});
+
+		webpackConfig.plugins.push(
+			new MiniCssExtractPlugin({
+				filename: 'css/[name].min.css',
+				chunkFilename: 'css/chunks/[name]-[contenthash:7].min.css',
+			}),
+		);
+	}
+
+	// handlebars precompiled templates
+	if (options.rules.hbs) {
+		const hbsRule = {
+			test: /\.hbs$/,
+			use: {
+				loader: require.resolve('handlebars-loader'),
+				// options: {
+				// 	helperDirs: [
+				// 		path.resolve(__dirname, '../../app/templating/hbs/helpers'),
+				// 	],
+				// 	knownHelpers: [],
+				// 	runtime: '',
+				// 	partialDirs: ''
+				// },
+			},
+		};
+		webpackConfig.module.rules.push(utils.getEnrichedConfig(hbsRule, options.rules.hbs));
+	}
+
+	// woff fonts (for example, in CSS files)
+	if (options.rules.woff) {
+		const woffRule = {
+			test: /.(woff(2)?)(\?[a-z0-9]+)?$/,
+			type: 'asset/resource',
+			generator: {
+				filename: 'media/fonts/[name]-[contenthash:7].[ext]',
+			},
+		};
+		webpackConfig.module.rules.push(utils.getEnrichedConfig(woffRule, options.rules.woff));
+	}
+
+	// different font types (legacy - eg. used in older library css)
+	if (options.rules.font) {
+		const fontRule = {
+			test: /\.(eot|svg|ttf|woff|woff2)([?#]+[A-Za-z0-9-_]*)*$/,
+			type: 'asset',
+			parser: {
+				dataUrlCondition: {
+					maxSize: 2 * 1028,
+				},
+			},
+			generator: {
+				filename: 'media/font/[name]-[contenthash:7].[ext]',
+			},
+		};
+		webpackConfig.module.rules.push(utils.getEnrichedConfig(fontRule, options.rules.font));
+	}
+
+	// images
+	if (options.rules.image) {
+		const imageRule = {
+			test: /\.(png|jpg|gif|svg)$/,
+			type: 'asset',
+			parser: {
+				dataUrlCondition: {
+					maxSize: 1028,
+				},
+			},
+			generator: {
+				filename: 'media/[ext]/[name]-[contenthash:7].[ext]',
+			},
+		};
+
+		webpackConfig.module.rules.push(utils.getEnrichedConfig(imageRule, options.rules.image));
+	}
+
+	// feature banner (enabled by default)
+	if (!options.features.banner === false) {
+		webpackConfig.plugins.push(new webpack.BannerPlugin({ banner, entryOnly: true }));
+	}
+
+	// feature bundle analyzer
+	if (options.features.bundleAnalyzer) {
+		webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+	}
+
+	return webpackConfig;
+};
+module.exports.appDirectory = appDirectory;

package/plugins/dynamicAliasResolver.js

@@ -1,31 +0,0 @@
-// developed for @nitro/webpack with infos & outline from:
-// https://stackoverflow.com/questions/54320025/tap-into-webpack-resolve-loader-to-add-fallback
-
-class DynamicAliasResolver {
-	constructor({ search, replace /*, fallback*/ }) {
-		this.search = search;
-		this.replace = replace;
-		// this.fallback = fallback;
-		this.filterFunction =
-			this.search instanceof RegExp ? (value) => search.test(value) : (value) => value.indexOf(search) !== -1;
-	}
-	apply(resolver) {
-		// current & next hook
-		const source = 'resolve';
-		const target = resolver.ensureHook('parsedResolve');
-
-		resolver.getHook(source).tapAsync('DynamicAliasResolver', (request, resolveContext, cb) => {
-			// change request if we find search term
-			if (this.filterFunction(request.request)) {
-				// possible improvement: check for existing file and use fallback
-				request.request = request.request.replace(this.search, this.replace);
-				// continue to the next hook
-				return resolver.doResolve(target, request, null, resolveContext, cb);
-			}
-			// continue
-			return cb();
-		});
-	}
-}
-
-module.exports = DynamicAliasResolver;