@nitro/webpack 11.0.4 → 11.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitro/webpack",
-  "version": "11.0.4",
+  "version": "11.0.6",
   "description": "nitro webpack",
   "license": "MIT",
   "author": "The Nitro Team",
@@ -22,7 +22,7 @@
     "nitro"
   ],
   "peerDependencies": {
-    "@nitro/app": ">=11.0.4",
+    "@nitro/app": ">=11.0.6",
     "webpack": "^5"
   },
   "dependencies": {
@@ -36,12 +36,13 @@
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "7.1.4",
     "cssnano": "7.1.2",
-    "image-minimizer-webpack-plugin": "4.1.4",
+    "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",
-    "postcss": "8.5.6",
+    "postcss": "8.5.8",
     "postcss-loader": "8.2.1",
     "resolve-url-loader": "5.0.0",
     "sass": "1.97.3",
@@ -62,7 +63,7 @@
     "@merkle-open/eslint-config": "4.0.1",
     "eslint": "8.57.1",
     "eslint-plugin-import": "2.32.0",
-    "webpack": "5.105.3"
+    "webpack": "5.105.4"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const config = require('config');
 const webpack = require('webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -7,7 +8,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 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 hmrPort = config.get('server.hmrPort');
+const hotMiddlewareScript = `webpack-hot-middleware/client?path=http://localhost:${hmrPort}/__webpack_hmr&timeout=20000&reload=true`;
 const appDirectory = fs.realpathSync(process.cwd());
 
 module.exports = (options = { rules: {}, features: {} }) => {
@@ -16,8 +18,8 @@ module.exports = (options = { rules: {}, features: {} }) => {
 		devtool: 'source-map',
 		context: appDirectory,
 		entry: {
-			ui: ['./src/ui', hotMiddlewareScript],
-			proto: ['./src/proto', hotMiddlewareScript],
+			ui: [hotMiddlewareScript, './src/ui'],
+			proto: [hotMiddlewareScript, './src/proto'],
 		},
 		output: {
 			path: path.resolve(appDirectory, 'public', 'assets'),
@@ -87,7 +89,7 @@ module.exports = (options = { rules: {}, features: {} }) => {
 	const theme = options.features.theme ? options.features.theme : false;
 
 	if (theme) {
-		webpackConfig.entry.ui = [`./src/ui.${theme}`, hotMiddlewareScript];
+		webpackConfig.entry.ui = [hotMiddlewareScript, `./src/ui.${theme}`];
 		webpackConfig.output.path = path.resolve(webpackConfig.output.path, theme);
 		webpackConfig.output.publicPath = `${webpackConfig.output.publicPath}${theme}/`;
 	}
@@ -210,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: {
@@ -218,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

@@ -277,7 +277,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 +285,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]`;
+				},
 			},
 		};