@nitro/webpack 11.0.5 → 11.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitro/webpack",
-  "version": "11.0.5",
+  "version": "11.0.7",
   "description": "nitro webpack",
   "license": "MIT",
   "author": "The Nitro Team",
@@ -22,7 +22,7 @@
     "nitro"
   ],
   "peerDependencies": {
-    "@nitro/app": ">=11.0.5",
+    "@nitro/app": ">=11.0.7",
     "webpack": "^5"
   },
   "dependencies": {
@@ -32,21 +32,23 @@
     "@babel/plugin-proposal-decorators": "7.29.0",
     "@babel/plugin-transform-class-properties": "7.28.6",
     "autoprefixer": "10.4.27",
-    "babel-loader": "10.0.0",
+    "babel-loader": "10.1.1",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "7.1.4",
-    "cssnano": "7.1.2",
+    "css-minimizer-webpack-plugin": "8.0.0",
+    "cssnano": "7.1.3",
     "config": "4.4.1",
     "image-minimizer-webpack-plugin": "5.0.0",
     "fork-ts-checker-webpack-plugin": "9.1.0",
     "handlebars-loader": "1.7.3",
     "imagemin": "9.0.1",
-    "mini-css-extract-plugin": "2.10.0",
+    "mini-css-extract-plugin": "2.10.1",
     "postcss": "8.5.8",
     "postcss-loader": "8.2.1",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.97.3",
+    "sass": "1.98.0",
     "sass-loader": "16.0.7",
+    "terser-webpack-plugin": "5.4.0",
     "thread-loader": "4.0.4",
     "ts-loader": "9.5.4",
     "typescript": "5.9.3",

package/readme.md

@@ -8,7 +8,7 @@ Configurable and easy to use webpack 5 config for nitro projects.
 
 ## Usage
 
-```
+```js
 const options = {
     rules: {
         script: true,

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

@@ -212,7 +212,7 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	// images
 	if (options.rules.image) {
 		const imageRule = {
-			test: /\.(png|jpg|gif|svg)$/,
+			test: /\.(png|jpe?g|gif|svg|webp)$/i,
 			type: 'asset',
 			parser: {
 				dataUrlCondition: {
@@ -220,7 +220,11 @@ module.exports = (options = { rules: {}, features: {} }) => {
 				},
 			},
 			generator: {
-				filename: 'media/[ext]/[name]-[contenthash:7][ext]',
+				filename: (pathData) => {
+					const match = pathData.filename.match(/\.([^.?#]+)(?:[?#].*)?$/);
+					const extNoDot = match ? match[1] : 'asset';
+					return `media/${extNoDot}/[name]-[contenthash:7][ext]`;
+				},
 			},
 		};
 		webpackConfig.module.rules.push(utils.getEnrichedConfig(imageRule, options.rules.image));

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

@@ -3,6 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const WebpackBar = require('webpackbar');
@@ -17,9 +18,11 @@ const bannerData = {
 	pkg: require(`${appDirectory}/package.json`),
 };
 
-const banner = `${bannerData.pkg.name}
-@version v${bannerData.pkg.version}
-@date ${bannerData.date}`;
+const bannerContent = `/**
+ * ${bannerData.pkg.name}
+ * @version v${bannerData.pkg.version}
+ * @date ${bannerData.date}
+ */`;
 
 module.exports = (options = { rules: {}, features: {} }) => {
 	const imageMinimizerPlugins = [];
@@ -68,7 +71,48 @@ module.exports = (options = { rules: {}, features: {} }) => {
 		);
 	}
 
-	const minimizerPlugins = [new TerserPlugin({ extractComments: false })];
+	const escapedPackageName = bannerData.pkg.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+	const packageNameRegExp = new RegExp(escapedPackageName);
+
+	const minimizerPlugins = [
+		new TerserPlugin({
+			extractComments: {
+				condition: /@license|@preserve|^!/i,
+				filename: (file) => {
+					const entryName = file.basename
+						.replace(/\.min/, '')
+						.replace(/\.js$/, '');
+
+					return `${entryName}.license.txt`;
+				},
+				banner: (licenseFile) => `See ../${licenseFile} for license information`,
+			},
+			terserOptions: {
+				format: {
+					comments: packageNameRegExp,
+				},
+				// compress: true,
+				// mangle: true,
+			},
+			parallel: true,
+		}),
+		new CssMinimizerPlugin({
+			parallel: false,
+			minimizerOptions: {
+				preset: [
+					'default',
+					{
+						discardComments: {
+							remove: (comment) => {
+								return !packageNameRegExp.test(comment);
+							},
+						},
+					},
+				],
+			},
+		}),
+	];
+
 	if (!(options.features.imageMinimizer === false || imageMinimizerPlugins.length === 0)) {
 		minimizerPlugins.push(
 			new ImageMinimizerPlugin({
@@ -277,7 +321,7 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	// images
 	if (options.rules.image) {
 		const imageRule = {
-			test: /\.(png|jpg|gif|svg)$/,
+			test: /\.(png|jpe?g|gif|svg|webp)$/i,
 			type: 'asset',
 			parser: {
 				dataUrlCondition: {
@@ -285,7 +329,11 @@ module.exports = (options = { rules: {}, features: {} }) => {
 				},
 			},
 			generator: {
-				filename: 'media/[ext]/[name]-[contenthash:7][ext]',
+				filename: (pathData) => {
+					const match = pathData.filename.match(/\.([^.?#]+)(?:[?#].*)?$/);
+					const extNoDot = match ? match[1] : 'asset';
+					return `media/${extNoDot}/[name]-[contenthash:7][ext]`;
+				},
 			},
 		};
 
@@ -294,7 +342,11 @@ module.exports = (options = { rules: {}, features: {} }) => {
 
 	// feature banner (enabled by default)
 	if (!options.features.banner === false) {
-		webpackConfig.plugins.push(new webpack.BannerPlugin({ banner, entryOnly: true }));
+		webpackConfig.plugins.push(new webpack.BannerPlugin({
+			banner: bannerContent.trim(),
+			raw: true,
+			entryOnly: true,
+		}));
 	}
 
 	// feature bundle analyzer